## 0

Click to Copy

#### discover

# FLICKITY

#### by METAFIZZY

## WHAT IS FLICKITY?

Flickity is a lightweight, powerful, and touch-friendly JavaScript library that makes carousels smooth and fun to use. Whether you’re building a product showcase, a media slider, or a dynamic gallery, Flickity delivers seamless, fluid, and interactive experiences right out of the box!

## EXEMPLE

## GETTING STARTED

### CDN (Recommended)

Simply add these lines in your HTML file:

`<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js">`

### Local setup

Download Flickity from Flickity’s GitHub
Place flickity.pkgd.min.js and flickity.min.css in your project folder
Link them in your HTML file

## INITIALIZATION

### HTML CAROUSEL

Flickity works on a container carousel element with a group of cell elements.

    <div class="main-carousel">
            <div class="carousel-cell">...</div>
            <div class="carousel-cell">...</div>
            <div class="carousel-cell">...</div>
            ...
    </div>

### JAVASCRIPT

You can use Flickity with vanilla JS :
new Flickity( elem )

    document.addEventListener("DOMContentLoaded", () => {
            var elem = document.querySelector('.carousel');
            new Flickity(elem, {
                  cellAlign: 'left',
                  contain: true
            });
      });

## OPTIONS

### NO-OPTIONS

### WRAP AROUND

### FREE SCROLL

### AUTO PLAY

## STYLE

### NO-STYLE

### .IS-SELECTED

### .FLICKITY-PAGE-DOTS

### :FOCUS