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

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. (Seeinterval
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. (Seeprev
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. (Seenext
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 centervertical_center
: Center children vertically in the container. Requires a browser withbefore
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.