This time I will share jQuery Plugin and tutorial about Responsive jQuery Content Carousel/Slideshow Plugin – Ribbon Carousel, hope it will help you in programming stack.
Ribbon Carousel is an easy and small jQuery slideshow plugin for create a responsive, mobile-first, automatic content carousel that allows to loop infinitely over items when clicking next or previous arrows.
How to use it:
1. Load the jQuery library together with the ribboncarousel.jqueryplugin.js
and ribboncarousel.css
in your webpage.
1 |
< link rel = "stylesheet" href = "path/to/ribboncarousel.css" > |
2 |
< script src = "//code.jquery.com/jquery-2.1.3.min.js" ></ script > |
3 |
< script src = "path/to/ribboncarousel.jqueryplugin.js" ></ script > |
2. Load the Font Awesome 4 for carousel control icons.
1 |
< link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" > |
3. Insert your Html content into the carousel/slideshow like this:
01 |
< div class = "ribbon-carousel" > |
05 |
< figure > < img src = "1.jpg" alt = "Alt 1" > </ figure > |
10 |
< figure > < img src = "2.jpg" alt = "Alt 2" > </ figure > |
15 |
< figure > < img src = "3.jpg" alt = "Alt 3" /> |
16 |
< figcaption class = "right" > |
4. Initialize the carousel.
1 |
$( '.ribbon-carousel' ).ribbonCarousel(); |
5. Available options.
08 |
autoPlayInterval:5000, |
12 |
maxAutoPlayIntervals:0, |
13 |
containerWidthPortion:1, |
19 |
pageAnchorPrefix: 'slide' , |
22 |
themeClass: 'ribbon-carousel-theme-default' , |
Change logs:
v1.2.2 (2015-12-23)
2015-12-10
- fix to dynamic buffer logic on resizing
2015-11-03
2015-10-07
- refactor for better rendering
2015-08-02
- add draggability to ribbon carousel
- update controls
2015-04-13
This awesome jQuery plugin is developed by ninapavlich. For more Advanced Usages, please check the demo page or visit the official website.