silk infinite carousel - Free Download Easy Infinite Carousel Slider Plugin - jQuery Silk-Carousel

Free Download Easy Infinite Carousel Slider Plugin – jQuery Silk-Carousel

Posted on

This time I will share jQuery Plugin and tutorial about Easy Infinite Carousel Slider Plugin – jQuery Silk-Carousel, hope it will help you in programming stack.

silk infinite carousel - Free Download Easy Infinite Carousel Slider Plugin - jQuery Silk-Carousel
File Size: 1.84 MB
Views Total: 888
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Silk-Carousel is an easy-to-use, infinite-looping carousel/slider/slideshow plugin to automatically transition between an array of images at a given speed.

Features:

  • Dynamic image rendering.
  • Autoplay progress bar.
  • Fade & zoom transition effects.
  • Rich text caption bar.
  • Fully responsive and cross-platform.
  • Navigation arrows, pagination progressbars, and Autoplay/Pause controls.
  • Auto hides controls on mouse out.
  • Easy to extend and create your own themes.

How to use it:

1. Download and insert the Silk-Carousel plugin’s files into your webpage which has jQuery library loaded.

1 <link rel="stylesheet" href="./css/Carousel_Version.css" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="./js/Carousel_Version.js"></script>

2. Create a container where you want to place the carousel.

1 <div id="example"></div>

3. Define an array of images to display in the carousel.

1 var imageList = [
2     "1.jpg",
3     "2.jpg",
4     "3.jpg",
5     "4.jpg",
6     "5.jpg"
7 ]

4. Define an array of image descriptions to display in the caption bar.

01 var imageDesc = [
02     "<h1>Image 1</h1>
03     <span>This is Image 1</span>",
04     "",
05     "<h1>Image 3</h1>
06     <span>This is Image 3</span>",
07     "<h1>Image 4</h1>
08     <span>This is Image 4</span>",
09     "",
10 ]

5. Define an array of anchor links to display at the bottom of the descriptions.

6. Initialize the carousel plugin and done.

1 carouselRun({
2   _target: "#example",
3   width: "40%",
4   height: "580px",
5   imageSrcs: imageList,
6   anchorHrefs: imageLink,
7   htBoardTexts: imageDesc
8 });

7. Create your own themes as follows:

01 .loli-pink{
02   background-color: rgb(255, 68, 171);
03   border-radius: 12px;
04   outline: none !important;
05   box-shadow: 0 0 8px snow;
06   border: 1.6px dashed rgb(255, 68, 171);
07 }
08  
09 .loli-pink .htBoard {
10   border-radius: 12px;
11   opacity: 0;
12   transition: all 0.3s;
13   border: 1.2px ridge rgb(255, 68, 171);
14   background: url(./images/loli-pink/decor.png) rgba(255, 254, 248, 0.90) no-repeat !important;
15   background-size: 8% !important;
16   padding-left: 6%;
17   filter: none !important;
18 }
19  
20 .loli-pink .htBoard * {
21   color: rgb(241, 97, 179);
22 }
23  
24 .loli-pink:hover .htBoard{
25   opacity: 1;
26 }
27  
28 .loli-pink .barSet{
29   filter: none !important;
30 }
31  
32 .loli-pink .progressBar {
33   border-radius: 9999px;
34   background-color: rgba(255, 73, 173, 0.86);
35   border: 1.5px solid rgb(255, 68, 171);
36 }
37  
38 .loli-pink .progressBar div{
39   border-radius: 9999px;
40 }
41  
42 .loli-pink .btnPrev{
43   background-image: url(./images/loli-pink/prev.png);
44 }
45  
46 .loli-pink .btnNext{
47   background-image: url(./images/loli-pink/next.png);
48   transform: none;
49 }
50  
51 .loli-pink .turnBtn{
52   background-color: rgb(255, 84, 182);
53   filter: none !important;
54   box-shadow: 0 0 8px snow;
55   transition: opacity 0.3s, box-shadow 0.3s;
56 }
57  
58 .loli-pink .turnBtn:hover{
59   box-shadow: 0 0 14px snow;
60 }
61  
62 .loli-pink .playPause {