Easy & Responsive jQuery Carousel Slider Plugin - FilmRoll

Easy & Responsive jQuery Carousel Slider Plugin - FilmRoll
File Size: 20 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

FilmRoll is a jQuery slider plugin for creating a responsive carousel that has the ability to center the selected item on the page, especially when all of the items had varying widths.

Features:

  • Simple and easy-to-use
  • Focuses on one item at time. So that you can place the most important items in the center of the carousel slider to grab the vistitor's attention.
  • Works with both large and small items, can use external buttons, and more
  • Auto scroll with stop on hover
  • Generates dots, arrow and button navigations automatically
  • Supports swipe events on mobile device (IN DEVELOPMENT). 
  • Responsive design. The carousel will auto resize when window size changed.

Basic Usage:

1. Include the latest version of jQuery library and jQuery FilmRoll plugin at the bottom of your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.film_roll.js"></script> 

2. Markup html structure

<div id='demo'>
<div><a href='#'><img src="http://placehold.it/530x530"></a></div>
<div><a href='#'><img src="http://placehold.it/700x530"></a></div>
<div><a href='#'><img src="http://placehold.it/800x530"></a></div>
<div><a href='#'><img src="http://placehold.it/800x530"></a></div>
<div><a href='#'><img src="http://placehold.it/530x530"></a></div>
</div>

3. The javascript

(function() {
jQuery(function() {
this.film_rolls || (this.film_rolls = []);
this.film_rolls['demo'] = new FilmRoll({
container: '#demo',
height: 560
});
return true;
});
}).call(this);

4. Options

start_index: //  The index of the first element to center
pager: true, // Display pagination dots at the bottom of the carousel. True by default.
prev: '#left', // The jquery selector for the previous button. Creates its own button by default.
next: '#right', // The jquery selector for the next button. Creates its own button by default.
scroll: true, // Automatically scroll the carousel. True by default.
interval: 4,  // The automatic scroll interval. 4 seconds by default.
animation: 1, // The slide animation duration. 1/4 of interval by default.
no_css: // Do not add default css to page.
shuttle_width: 10000 // The starting shuttle width until the page loads. Defaults to 10000. See troubleshooting.

Change log:

2014-07-23

  • Don't swipe if narrower than wrapper

2014-07-19

  • Fix $.width change

2014-04-18

  • added jquery.transit.js support

2014-02-27

  • added scroll on hover.

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