Options

Setup

cellSelector

Specify selector for cell elements. cellSelector is useful if you have other elements in your carousel elements that are not cells.

cellSelector: '.carousel-cell'

<div class="carousel">
  <div class="static-banner">Static banner 1</div>
  <div class="static-banner">Static banner 2</div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  ...
</div>
Static banner 1
Static banner 2

Edit this demo on CodePen

initialIndex

Zero-based index of the initial selected cell.

initialIndex: 2

Edit this demo on CodePen

accessibility

Enable keyboard navigation. Users can tab to a Flickity carousel, and pressing left & right keys to change cells. Enabled by default accessibility: true.

accessibility: false
// disables being able to tab to Flickity
// and keyboard navigation

Edit this demo on CodePen

setGallerySize

Sets the height of the carousel to the height of the tallest cell. Enabled by default setGallerySize: true.

Use setGallerySize: false if you prefer to size the carousel with CSS, rather than using the size of cells.

setGallerySize: false

/* carousel height */
.carousel {
  height: 160px;
}

/* cell inherit height from carousel */
.carousel-cell {
  height: 100%;
}

Edit this demo on CodePen

With setGallerySize: false, you can set the size of the carousel to 100% width and height, for a "full-bleed" carousel.

setGallerySize: false

/* inherit height from parent */
.carousel { height: 100%; }

.carousel-cell { height: 100% }

/* move page dots into carousel */
.flickity-page-dots { bottom: 10px; }

Edit this demo on CodePen

You can size the carousel height as percentage of its width with padding-bottom and .flickity-viewport CSS.

setGallerySize: false

/* carousel height, as percentage of width */
.carousel {
  padding-bottom: 33.3%;
}

/* viewport inherit size from carousel */
.carousel .flickity-viewport {
  position: absolute;
  width: 100%;
}

/* cell inherit height from carousel */
.carousel-cell {
  height: 100%;
}

Edit this demo on CodePen

resize

Adjusts sizes and positions when window is resized. Enabled by default resize: true.

resize: false
// disables resize logic

/* carousel has fixed width */
.carousel {
  width: 300px;
}

Edit this demo on CodePen

Cell position

cellAlign

Align cells within the carousel element.

cellAlign: 'left'

Edit this demo on CodePen 

// default cellAlign: 'center'

Edit this demo on CodePen 

cellAlign: 'right'

Edit this demo on CodePen

contain

Contains cells to carousel element to prevent excess scroll at beginning or end. Has no effect if wrapAround: true.

contain: true

Edit this demo on CodePen

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: true

Edit this demo on CodePen

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 Browserify or RequireJS without flickity.pkgd.js, you need to install and require flickity-imagesloaded separately. See details in Extras.

percentPosition

Sets positioning in percent values, rather than pixel values. If your cells do not have percent widths, we recommended percentPosition: false.

// default percentPosition: true
// sets cell position in percentages

/* cell width in percent */
.carousel-cell {
  width: 66%;
}

Edit this demo on CodePen 

percentPosition: false
// sets cell position in pixels

/* cell width in pixels */
.carousel-cell {
  width: 300px;
}

Edit this demo on CodePen

rightToLeft

Enables right-to-left layout.

rightToLeft: true

Edit this demo on CodePen

Behavior

draggable

Enables dragging and flicking. Enabled by default dragging: true.

draggable: false

Edit this demo on CodePen

freeScroll

Enables content to be freely scrolled and flicked without aligning cells to an end position.

freeScroll: true

Edit this demo on CodePen

Enable freeScroll and contain for a simple horizontal scroller.

freeScroll: true,
contain: true,
// disable previous & next buttons and dots
prevNextButtons: false,
pageDots: false

Edit this demo on CodePen

Enable freeScroll and wrapAround and you can flick forever, man.

freeScroll: true,
wrapAround: true

Edit this demo on CodePen

wrapAround

At the end of cells, wrap-around to the other end for infinite scrolling.

wrapAround: true

Edit this demo on CodePen

lazyLoad

Loads cell images when a cell is selected.

Set the image's URL to load with data-flickity-lazyload.

<img data-flickity-lazyload="full.jpg" />
<!-- Set optional placeholder src -->
<img src="placeholder.jpg" data-flickity-lazyload="full.jpg" />

lazyLoad: true
// lazyloads image in selected cell

<div class="carousel">
  <div class="carousel-cell">
    <img class="carousel-cell-image"
      data-flickity-lazyload="tulip.jpg" />
  </div>
  <div class="carousel-cell">
    <img class="carousel-cell-image"
      data-flickity-lazyload="grapes.jpg" />
  </div>
  ...
</div>
tulip
grapes
raspberries
wolf
sea
green beads
gulls
touch
van

Edit this demo on CodePen

Set lazyLoad to a number to load images in adjacent cells.

lazyLoad: 2
// load images in selected cell
// and next 2 cells
// and previous 2 cells
tulip
grapes
raspberries
wolf
sea
green beads
gulls
touch
van

Edit this demo on CodePen

After loading the image, Flickity will add flickity-lazyloaded class to the image, or flickity-lazyerror to a broken image. You can use this class to add a transition when images are loaded.

/* fade in image when loaded */
.carousel-cell-image {
  transition: opacity 0.4s;
  opacity: 0;
}

.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}

If using natural size of images for the size of cells, set a min-width to cells have a size when images are not loaded.

<div class="carousel">
  <img class="carousel-image"
    data-flickity-lazyload="tulip.jpg" />
  <img class="carousel-image"
    data-flickity-lazyload="grapes.jpg" />
  ...
</div>

.carousel-image {
  min-width: 150px;
}
tulip grapes raspberries wolf sea green beads gulls touch van

Edit this demo on CodePen

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.

autoPlay: true
// advance cells every 3 seconds

Edit this demo on CodePen 

autoPlay: 1500 // {Number}
// advance cells ever {Number} milliseconds
// 1500 will advance cells every 1.5 seconds

Edit this demo on CodePen

Auto-playing will pause when the user hovers over the carousel. Set pauseAutoPlayOnHover: false to disable this behavior.

autoPlay: 1500,
pauseAutoPlayOnHover: false
// auto play continues when user hovers over carousel

Edit this demo on CodePen

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'.

IE8 and Android 2.3 do not support watching :after. Flickity will be disabled when watchCSS: true. Set watchCSS: 'fallbackOn' to enable Flickity for these browsers.

watchCSS: true
// enable Flickity in CSS when
// element:after { content: 'flickity' }
// Flickity is disabled for IE8 and Android 2.3

/* enable Flickity by default */
.carousel:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
  /* disable Flickity for large devices */
  .carousel:after {
    content: '';
  }
}

Edit this demo on CodePen

asNavFor

Use one Flickity carousel as navigation for another.

// asNavFor can be set a selector string
asNavFor: '.carousel-main'
// or an element
asNavFor: $('.carousel-main')[0]
asNavFor: document.querySelector('.carousel-main')

// 1st carousel, main
$('.carousel-main').flickity();
// 2nd carousel, navigation
$('.carousel-nav').flickity({
  asNavFor: '.carousel-main',
  contain: true,
  pageDots: false
});

/* is-nav-selected class added to nav cells */
.carousel-nav .carousel-cell.is-nav-selected {
  background: #ED2;
}

Edit this demo on CodePen

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 Browserify or RequireJS without flickity.pkgd.js, you need to install and require flickity-as-nav-for separately. See details in Extras.

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. Default selectedAttraction: 0.025.

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. Default friction: 0.28.

selectedAttraction: 0.2,
friction: 0.8
// higher attraction and higher friction
// faster transitions

Edit this demo on CodePen 

selectedAttraction: 0.01,
friction: 0.15
// lower attraction and lower friction
// slower transitions
// easier to flick past cells

Edit this demo on CodePen

freeScrollFriction

Slows movement of slider when freeScroll: true. Higher friction makes the slider feel stickier. Lower friction makes the slider feel looser. Default freeScrollFriction: 0.075.

freeScroll: true,
freeScrollFriction: 0.03
// lower friction, slides easier

Edit this demo on CodePen

UI

prevNextButtons

Creates and enables previous & next buttons. Enabled by default prevNextButtons: true.

prevNextButtons: false
// Disable previous & next buttons

Edit this demo on CodePen

pageDots

Creates and enables page dots. Enabled by default pageDots: true.

pageDots: false
// Disable page dots

Edit this demo on CodePen

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.

50 0 -50 0 50 100
x1, y1
x2, y2
x0
x3

Edit this demo on CodePen

Set a custom shape by setting arrowShape to a SVG path string. The path is for the left arrow drawn in a 100 × 100 viewbox.

arrowShape: 'M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z'

Edit this demo on CodePen

Help improve these docs. Open an issue or pull request.