Responsive jQuery Content Carousel/Slideshow Plugin - Ribbon Carousel

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.

<link rel="stylesheet" href="path/to/ribboncarousel.css">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="path/to/ribboncarousel.jqueryplugin.js"></script> 

2. Load the Font Awesome 4 for carousel control icons.

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

<div class="ribbon-carousel">
  <ul>
    <li>
      <a href="">
        <figure> <img src="1.jpg" alt="Alt 1" > </figure>
      </a> 
    </li>
    <li> 
      <a href="">
        <figure> <img src="2.jpg" alt="Alt 2" > </figure>
      </a> 
    </li>
    <li> 
      <a href="">
        <figure> <img src="3.jpg" alt="Alt 3" />
          <figcaption class="right">
            <p>Description</p>
          </figcaption>
        </figure>
      </a> 
    </li>
    ...
  </ul>
</div>

4. Initialize the carousel.

$('.ribbon-carousel').ribbonCarousel();

5. Available options.

// Window width in pixels at which point to mobile display
mobileBreak:767,

// Enable autoplay
autoPlay:false,

// Seconds between slides if auto-play is turned on
autoPlayInterval:5000,

// Number of times that auto-play runs before pausing. 
// Auto-play will play indefinitely if set to 0.
maxAutoPlayIntervals:0,
containerWidthPortion:1,

// Update window hash so that specific slides can be bookmarkable.
useAnchors:false,

// Window hash prefix used if useAnchors is true. 
pageAnchorPrefix:'slide',

// The css class to add to the container
themeClass:'ribbon-carousel-theme-default',

// Aspect ratio used, based on width of slide container, to establish the height of the slides. 
// If left null, it will calculate the average aspect ratio of all the slides and use that.
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.