Responsive Image Rotator Plugin with jQuery and CSS3 - vitrine.js

vitrine.js is a very small jQuery plugin to create a responsive image rotator / carousel that allows you to loop through images by clicking left or right sibling elements.

How to use it:

1. Load jQuery library and the jQuery vitrine.js plugin at the end of your document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jQuery.vitrine.js"></script>

2. Add a group of images into the rotator / carousel. You can specify the image captions via data-desc attribute on parent DIV elements.

<div id="vitrine">
  <div data-desc="Item 1"><img src="1.jpg"></div>
  <div data-desc="Item 2"><img src="2.jpg"></div>
  <div data-desc="Item 3"><img src="3.jpg"></div>
  <div data-desc="Item 4"><img src="4.jpg"></div>
  <div data-desc="Item 5"><img src="5.jpg"></div>
  <div data-desc="Item 6"><img src="6.jpg"></div>
</div>

3. Call the plugin on the top element and we're done. No any external CSS or image files required.

$('#vitrine').vitrine();

4. Config the image rotator / carousel.

// initial image
start: null,

// enable narrow layout
narrow: false,

// animation speed
speed: 400,

// infinite loop
loop: false,

// rotator title
title: '',

// title color
color: '#000'

---

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