Responsive jQuery Content Carousel/Slideshow Plugin - Ribbon Carousel

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

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="//"></script>
<script src="path/to/ribboncarousel.jqueryplugin.js"></script> 

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

<link rel="stylesheet" href="//">

3. Insert your Html content into the carousel/slideshow like this:

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

4. Initialize the carousel.


5. Available options.

// Window width in pixels at which point to mobile display

// Enable autoplay

// Seconds between slides if auto-play is turned on

// Number of times that auto-play runs before pausing. 
// Auto-play will play indefinitely if set to 0.

// Update window hash so that specific slides can be bookmarkable.

// Window hash prefix used if useAnchors is true. 

// The css class to add to the container

// 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.

Change logs:

v1.2.2 (2015-12-23)

  • remove compass reset


  • fix to dynamic buffer logic on resizing


  • JS update.


  • refactor for better rendering


  • add draggability to ribbon carousel
  • update controls


  • 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.