
flickity is a generic, flexible, modular jQuery slider plugin for creating responsive, touch-enable content sliders/gallaries/slideshows/carousels with physics-based animations and full-feature APIs. Flickity is currently licensed GPL v3.
Basic Usage:
1. Include the flickity's JavaScript and CSS in the document.
<link href="css/flickity.css" rel="stylesheet"> <script src="dist/flickity.pkgd.js"></script>
2. Include the jQuery library in the document (OPTIONAL).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
3. Embed your content into the slider like this:
<div class="carousel"> <div class="slide"><img src="https://unsplash.it/1600/800?image=615"></div> <div class="slide"><img src="https://unsplash.it/1600/800?image=614"></div> <div class="slide"><img src="https://unsplash.it/1600/800?image=613"></div> <div class="slide"><img src="https://unsplash.it/1600/800?image=612"></div> <div class="slide"><img src="https://unsplash.it/1600/800?image=611"></div> </div>
4. Make the slides have 100% width so that the slider will only display one image at a time.
.slide { width: 100%; height: 600px; }
5. Initialize the slider with jQuery.
$('.carousel').flickity();
6. Initialize the slider with vanilla JavaScript.
var demo = new flickity('.carousel',{//options});
7. Initialize the slider with data-* attribute in your Html.
<div id="slider" class="js-flickity" data-flickity-options='{}'>
8. All the default options.
$('.carousel').flickity({ accessibility: true, // enable keyboard navigation, pressing left & right keys autoPlay: false, // advances to the next cell // if true, default is 3 seconds // or set time between advances in milliseconds // i.e. `autoPlay: 1000` will advance every 1 second cellAlign: 'center', // alignment of cells, 'center', 'left', or 'right' // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right) cellSelector: undefined, // specify selector for cell elements contain: false, // will contain cells to container // so no excess scroll at beginning or end // has no effect if wrapAround is enabled draggable: true, // enables dragging & flicking freeScroll: false, // enables content to be freely scrolled and flicked // without aligning cells friction: 0.2, // smaller number = easier to flick farther imagesLoaded: false, // if imagesLoaded is present, Flickity can re-position cells // once images are loaded initialIndex: 0, // zero-based index of the initial selected cell percentPosition: true, // sets positioning in percent values, rather than pixels // Enable if items have percent widths // Disable if items have pixel widths, like images prevNextButtons: true, // creates and enables buttons to click to previous & next cells pageDots: true, // create and enable page dots resizeBound: true, // listens to window resize events to adjust size & positions watchCSS: false, // watches the content of :after of the element // activates if #element:after { content: 'flickity' } // IE8 and Android 2.3 do not support watching :after // set watch: 'fallbackOn' to enable for these browsers wrapAround: false // at end of cells, wraps-around to first for infinite scrolling });
Change log:
v2.1.2 (2018-10-08)
- Fix dragging on (iOS 9.3 / Safar), copy pageX, pageY in _pointerDownDefault
This awesome jQuery plugin is developed by metafizzy. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 08.10.2018
- Source