Flickity - responsive touch slider for site

March 9, 2016 38 Алиса Ставко

Flickity - this is responsive, touch (gesture control for tablets and phones) slider for the site. Easy to use, quick to integrate and simple in configure.

Visual example of work adaptive touch gallery:

Quick start

For quick integration necessary a few lines: 

<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="/path/to/flickity.css" media="screen">
        <script src="/path/to/flickity.pkgd.min.js"></script>
        <!-- ... -->
    </head>
    <body>
        <div class="main-gallery">
            <div class="gallery-cell">...</div>
            <div class="gallery-cell">...</div>
            <div class="gallery-cell">...</div>
            ...
        </div>
    </body>
</html>

Initialize with jQuery

Initialize a slider with jQuery and configure it to your needs: 

<!DOCTYPE html>
<html>
    <head>
        <!-- include jQuery -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <!-- ... -->
        <link rel="stylesheet" href="/path/to/flickity.css" media="screen">
        <script src="/path/to/flickity.pkgd.min.js"></script>
        $('.my-gallery').flickity({
            // options
            cellAlign: 'left',
            contain: true,
            autoPlay: 10000,
            freeScroll: true,
            wrapAround: true,
        });
        <!-- ... -->
    </head>
    <body>
        <div class="best-goods-gallery">
            <div class="gallery-cell">...</div>
            <div class="gallery-cell">...</div>
            <div class="gallery-cell">...</div>
            ...
        </div>
    </body>
</html>

Basic properties

Property Default Description Example
initialIndex 0 Index of start slide initialIndex: 2
accessibility true Enable keyboard navigation accessibility: false
resize true Adjusting the size and position when the window is resized resize: false
draggable Enable dragging and clicking draggable: false
wrapAround false Infinite scrolling slider wrapAround: true
autoPlay false Automatically advances to the next slide. When the mouse auto transition is turned off, and resumes when the mouse is removed from the area of the slider autoPlay: 1500
prevNextButtons true Displays the previous and next buttons (arrows) prevNextButtons: false
pageDots true Creates a dot for each slide and displays them (navigation) pageDots: false

Additionally

Project on github: https://github.com/metafizzy/flickity

Site of project: http://flickity.metafizzy.co/

JavaScript,  jQuery,  slider