Flickity – Touch, Responsive, Flickable Carousels

Flickity

The Developer from Masonry, Isotope and Packery also wrote a modern and highly configurable Carousel and Slider library, called Flickity. It’s also licensed under the GPLv3, free-to-use for OpenSource projects and chargeable for commercial websites. Like all other Scripts is this library also written in Vanilla JavaScript (with jQuery Bindings), and has removed the IE 8 / 9 Support in Version 2.0.0.

Download the latest version of Flickity as .ZIP or as .TAR package!

npm i flickity --save

yarn add flickity --save

bower install flickity --save

Instructions

The Flickity package contains the main JavaScript as normal and minified Version, as well as a core / example Stylesheet. The Stylesheet is also available as minified version.

 

Load Flickity

It’s recommended to load the Stylesheet within the HTML <head> element, and the JavaScript file directly after the starting <body> tag.

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/flickity.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/flickity.pkgd.min.js"></script>
        
        <!-- Required HTML Structure -->
        <div class="webscripts-carousel">
            <div class="carousel-cell">Slide #1</div>
            <div class="carousel-cell">Slide #2</div>
            <div class="carousel-cell">Slide #3</div>
        </div>
    </body>
</html>

 

Configure Flickity

This Carousel / Slider library offers MANY options to configure the design and it’s behavior. So it’s really recommended to read the official documentation!

document.addEventListener("DOMContentLoaded", {
    var flkty = new Flickity('.webscripts-carousel', {
        draggable:          ">1",
        freeScroll:         true,
        wrapAround:         true,
        groupCells:         false,
        autoPlay:           false,
        fullscreen:         false,
        adaptiveHeight:     false,
        watchCSS:           false,
        asNavFor:           null,
        hash:               false,
        dragThreshold:      3,
        selectedAttraction: 0.025,
        friction:           0.28,
        freeScrollFriction: 0.075,
        imagesLoaded:       false,
        lazyLoad:           false,
        bgLazyLoad:         false,
        cellSelector:       ".carousel-cell",
        initialIndex:       0,
        accessibility:      true,
        setGallerySize:     true,
        resize:             true,
        cellAlign:          "center",
        contain:            false,
        percentPosition:    true,
        rightToLeft:        false,
        prevNextButtons:    true,
        pageDots:           true,
        arrowShape: { 
            x0:     10,
            x1:     60, 
            y1:     50,
            x2:     70, 
            y2:     40,
            x3:     30
        }
    });
});

 

Configure: Options

draggable
Enables dragging and flicking. Enabled by default when carousel has 2 or more slides.
freeScroll
Enables content to be freely scrolled and flicked without aligning cells to an end position.
wrapAround
At the end of cells, wrap-around to the other end for infinite scrolling.
groupCells
Groups cells together in slides. Flicking, page dots, and previous/next buttons are mapped to group slides, not individual cells. is-selected class is added to the multiple cells in the selected slide.
autoPlay
Automatically advances to the next cell Auto-playing will pause when mouse is hovered over, and resume when mouse is hovered off. Auto-playing will stop when the carousel is clicked or a cell is selected.
fullscreen
Enables fullscreen view of carousel. Adds button to view and exit fullscreen. In fullscreen view, pressing ESC will exit fullscreen. Fullscreen functionality requires the flickity-fullscreen package. It is not included in flickity.pkgd.js and must be installed separately.
adaptiveHeight
Changes height of carousel to fit height of selected slide.
watchCSS
You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the carousel element. Flickity is enabled if :after content is ‘flickity’.
asNavFor
Use one Flickity carousel as navigation for another. Clicking the nav carousel will select the content carousel. Selecting a cell in the content carousel will sync to the nav carousel. asNavFor requires the flickity-as-nav-for package. It already is included with flickity.pkgd.js, but not with Flickity as a stand-alone package. If you are using Webpack or RequireJS without flickity.pkgd.js, you need to install and require flickity-as-nav-for separately. See details in Extras.
hash
Enables hash navigation to select slides with links and URLs. Changes page URL to selected cell id. Hash behavior option requires the flickity-hash package. It is not included in flickity.pkgd.js and must be installed separately.
dragThreshold
The number of pixels a mouse or touch has to move before dragging begins. Increase dragThreshold to allow for more wiggle room for vertical page scrolling on touch devices.
selectedAttraction & friction
selectedAttraction and friction are the two options that control the speed and motion of the slider. selectedAttraction attracts the position of the slider to the selected cell. Higher attraction makes the slider move faster. Lower makes it move slower. friction slows the movement of slider. Higher friction makes the slider feel stickier and less bouncy. Lower friction makes the slider feel looser and more wobbly.
freeScrollFriction
Slows movement of slider when freeScroll: true. Higher friction makes the slider feel stickier. Lower friction makes the slider feel looser.
imagesLoaded
Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded. imagesLoaded requires the flickity-imagesloaded package. It already is included with flickity.pkgd.js, but not with Flickity as a stand-alone package. If you are using Webpack or RequireJS without flickity.pkgd.js, you need to install and require flickity-imagesloaded separately.
lazyLoad
Loads cell images when a cell is selected. Set the image’s src URL to load with data-flickity-lazyload or data-flickity-lazyload-src.
bgLazyLoad
Loads cell background image when a cell is selected. bgLazyLoad requires the flickity-bg-lazyload package. This package is not included and must be installed separately.
cellSelector
Specify selector for cell elements. cellSelector is useful if you have other elements in your carousel elements that are not cells.
initialIndex
Zero-based index of the initial selected cell.
accessibility
Enable keyboard navigation. Users can tab to a Flickity carousel, and pressing left & right keys to change cells.
setGallerySize
Sets the height of the carousel to the height of the tallest cell. Use setGallerySize: false if you prefer to size the carousel with CSS, rather than using the size of cells.
resize
Adjusts sizes and positions when window is resized.
cellAlign
Align cells within the carousel element.
contain
Contains cells to carousel element to prevent excess scroll at beginning or end. Has no effect if wrapAround: true.
percentPosition
Sets positioning in percent values, rather than pixel values. If your cells do not have percent widths, we recommended percentPosition: false.
rightToLeft
Enables right-to-left layout.
prevNextButtons
Creates and enables previous & next buttons
pageDots
Creates and enables page dots.
arrowShape
Draws the shape of the arrows in the previous & next buttons. The arrow is drawn on a 100 × 100 viewbox with four points (p0, p1, p2, p3) made up of six coordinates x0, x1, y1, x2, y2, x3. The four points draw the top half on the left arrow.

Leave a Reply

Top