Easy & Responsive jQuery Carousel Slider Plugin - FilmRoll

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

• animation: The slide animation duration. 1/4 of interval by default. (See interval option.)
• configure_load: If true, configure widths immediately (use if instantiating FilmRoll with the page load event.) If false, configure width on the window load event. If a function, immediately call the function. False by default. Without this option FilmRoll assumes it has been instantiated on DOM ready (jQuery.ready()) and it will schedule its width configuration to run on page load.
• easing: swing by default. jQuery also provides linear. jQueryUI provides more.
• height: Set the height of the film_roll wrapper (which sits inside the container.) Options are:
• hover: If true, pause scroll on hover. If false, ignore hover. If 'scroll', scroll the carousel on hover. True by default.
• interval: The automatic scroll interval. 4 seconds by default. To turn off the automatic scroll, see thescroll option.
• next: The jquery selector for the next button. Creates its own button by default. Use false for nothing. (See prev option.)
• no_css: Do not add default css to page. You will want to include it otherwise.
• pager: Display pagination dots at the bottom of the carousel. True by default.
• prev: The jquery selector for the previous button. Creates its own button by default. Use false for nothing. (See next option.)
• resize: Re-center the carousel on window resize. True by default. Set to false to perform your own logic before calling film_roll_variable.resize();.
• scroll: Automatically scroll the carousel. True by default.
• shuttle_width: The starting shuttle width until the page loads. Defaults to 10000.
• start_height: A starting height to give the carousel. Use only if you are having content flashes.
• start_index: The index of the first element to center
• vertical_center: Center children vertically in the container. Requires a browser with before CSS pseudo class support. This is useful for a full screen carousel.

Change logs:

2016-03-02

• v0.1.17

2015-04-15

• v0.1.16

2015-04-14

• Handle duplicate calls

2015-03-16

• TouchSwipe cancel link

2014-12-17

• Add configureLoad delay option

2014-12-16

• Allow no prev/next buttons

2014-08-06

• Fix check if touchswipe is not included

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.