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-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.
4. Define an array of image descriptions to display in the caption bar.
03 |
<span>This is Image 1</span> ", |
06 |
<span>This is Image 3</span> ", |
08 |
<span>This is Image 4</span> ", |
5. Define an array of anchor links to display at the bottom of the descriptions.
6. Initialize the carousel plugin and done.
6 |
anchorHrefs: imageLink, |
7 |
htBoardTexts: imageDesc |
7. Create your own themes as follows:
02 |
background-color : rgb ( 255 , 68 , 171 ); |
04 |
outline : none !important ; |
05 |
box-shadow: 0 0 8px snow; |
06 |
border : 1.6px dashed rgb ( 255 , 68 , 171 ); |
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 ; |
17 |
filter: none !important ; |
20 |
.loli-pink .htBoard * { |
21 |
color : rgb ( 241 , 97 , 179 ); |
24 |
.loli-pink:hover .htBoard{ |
29 |
filter: none !important ; |
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 ); |
38 |
.loli-pink .progressBar div{ |
39 |
border-radius: 9999px ; |
43 |
background-image : url (./images/loli-pink/prev.png); |
47 |
background-image : url (./images/loli-pink/next.png); |
52 |
background-color : rgb ( 255 , 84 , 182 ); |
53 |
filter: none !important ; |
54 |
box-shadow: 0 0 8px snow; |
55 |
transition: opacity 0.3 s, box-shadow 0.3 s; |
58 |
.loli-pink .turnBtn:hover{ |
59 |
box-shadow: 0 0 14px snow; |
62 |
.loli-pink .playPause { |