Responsive Carousel & Photo Gallery Plugin - Caro.js

Caro.js is a responsive, flexible, customizable, and full-featured carousel & gallery plugin for any type of web content.

More Features:

• Infinite Loop.
• Auto Play.
• Horizontal & Vertical scrolling.
• Thumbnail navigation.
• Auto adjusts the height based on your content.
• Carousel -in-carousel is supported as well.

How to use it:

1. Import the JavaScript jquery.caro.min.js into the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.caro.min.js"></script>

2. Add slides together with navigation controls to the carousel.

<div id="example">
  <div class="controls">
      <a href="#" class="previous button">Previous</a>
      <a href="#" class="play button">Play</a>
      <a href="#" class="stop button">Stop</a>
      <a href="#" class="next button">Next</a>
      <a href="#" class="first button">First</a>
      <a href="#" class="last button">Last</a>
  </div>
  <div class="slides">
      <div>
        Slide 1
      </div>
      <div>
        Slide 2
      </div>
      <div>
        Slide 3
      </div>
      <div>
        Slide 4
      </div>
      <div>
        Slide 5
      </div>
  </div>
  <div class="navigation"></div>
</div>

3. Call the function on the top container to initialize the carousel.

$("#example").caro({
  // options here
});

4. Customize the carousel by passing the following settings.

$("#example").caro({

  // or 'vertical'
  direction: 'horizontal',

  // delay in ms
  delay: 300,

  // how long slide stays still in playback mode
  still: 1000, 

  // enables autoplay mode
  autoPlay: false,
  classes: {
    slides: 'slides',
    button: 'button',
    navigation: 'navigation',
    previous: 'previous',
    next: 'next',
    first: 'first',
    last: 'last',
    currentAmount: 'currentAmount',
    totalAmount: 'totalAmount'
  },

  // auto generates navigation like thumbnails
  autoNavigation: false,

  // enables infinite loop
  cycle: false,

  // auto resize to fit your screen
  resize: true,
  resizeDelay: 300,

  // initial slide
  initialSlide: 0
  
});

---

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