Responsive jQuery Content Carousel Slideshow Plugin Ribbon Carousel - Download Responsive jQuery Content Carousel/Slideshow Plugin - Ribbon Carousel

Download Responsive jQuery Content Carousel/Slideshow Plugin – Ribbon Carousel

By Posted on

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.

Responsive jQuery Content Carousel Slideshow Plugin Ribbon Carousel - Download Responsive jQuery Content Carousel/Slideshow Plugin - Ribbon Carousel
File Size: 1.08 MB
Views Total: 3492
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



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.

view source
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.

view source
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:

view source
01 <div class="ribbon-carousel">
02   <ul>
03     <li>
04       <a href="">
05         <figure> <img src="1.jpg" alt="Alt 1" > </figure>
06       </a>
07     </li>
08     <li>
09       <a href="">
10         <figure> <img src="2.jpg" alt="Alt 2" > </figure>
11       </a>
12     </li>
13     <li>
14       <a href="">
15         <figure> <img src="3.jpg" alt="Alt 3" />
16           <figcaption class="right">
17             <p>Description</p>
18           </figcaption>
19         </figure>
20       </a>
21     </li>
22     ...
23   </ul>
24 </div>

4. Initialize the carousel.

view source
1 $('.ribbon-carousel').ribbonCarousel();

5. Available options.

view source
01 // Window width in pixels at which point to mobile display
02 mobileBreak:767,
03  
04 // Enable autoplay
05 autoPlay:false,
06  
07 // Seconds between slides if auto-play is turned on
08 autoPlayInterval:5000,
09  
10 // Number of times that auto-play runs before pausing.
11 // Auto-play will play indefinitely if set to 0.
12 maxAutoPlayIntervals:0,
13 containerWidthPortion:1,
14  
15 // Up<a href="https://www.jqueryscript.net/time-clock/">date</a> window hash so that specific slides can be bookmarkable.
16 useAnchors:false,
17  
18 // Window hash prefix used if useAnchors is true.
19 pageAnchorPrefix:'slide',
20  
21 // The css class to add to the container
22 themeClass:'ribbon-carousel-theme-default',
23  
24 // Aspect ratio used, based on width of slide container, to establish the height of the slides.
25 // If left null, it will calculate the average aspect ratio of all the slides and use that.
26 aspectRatio:null

Change logs:

v1.2.2 (2015-12-23)

  • remove compass reset

2015-12-10

  • fix to dynamic buffer logic on resizing

2015-11-03

  • JS update.

2015-10-07

  • refactor for better rendering

2015-08-02

  • add draggability to ribbon carousel
  • update controls

2015-04-13

  • support async loading

 

This awesome jQuery plugin is developed by ninapavlich. For more Advanced Usages, please check the demo page or visit the official website.




source : jqueryscript.net

Related posts: