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>

Edit this demo on CodePen

initialIndex

Zero-based index of the initial selected cell.

initialIndex: 2

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

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%;
}

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; }

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%;
}

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;
}

Cell position

cellAlign

Align cells within the carousel element.

cellAlign: 'left'
// default cellAlign: 'center'
cellAlign: 'right'

contain

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

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

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%;
}
percentPosition: false
// sets cell position in pixels
/* cell width in pixels */
.carousel-cell {
  width: 300px;
}

rightToLeft

Enables right-to-left layout.

rightToLeft: true

Behavior

draggable

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

draggable: false

freeScroll

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

freeScroll: true

Enable freeScroll and contain for a simple horizontal scroller.

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

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

freeScroll: true,
wrapAround: true

wrapAround

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

wrapAround: true

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.

groupCells: true
// if set to true,
// group cells that fit in carousel viewport
groupCells: 2
// if set to a number, group cells by that number
groupCells: '80%'
// if set to a percent string,
// group cells that fit in the percent of
// the width of the carousel viewport

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 slide
<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>

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

lazyLoad: 2
// load images in selected slide
// and next 2 slides
// and previous 2 slides

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;
}

bgLazyLoad

Loads cell background image when a cell is selected.

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

<div class="carousel-cell" data-flickity-bg-lazyload="image.jpg"></div>
bgLazyLoad: true
// lazyloads background image in selected slide
<div class="carousel">
  <div class="carousel-cell"
    data-flickity-bg-lazyload="tulip.jpg"></div>
  <div class="carousel-cell"
    data-flickity-bg-lazyload="breakfast.jpg"></div>
    ...
</div>

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

bgLazyLoad: 1
// lazyloads background image in selected slide
// and next 1 slide
// and previous 1 slide

After loading the background image, Flickity will add flickity-bg-lazyloaded class to the element, or flickity-lazyerror if the image was broken.

bgLazyLoad requires the flickity-bg-lazyload package. This package is not included and must be installed separately.

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
autoPlay: 1500 // {Number}
// advance cells ever {Number} milliseconds
// 1500 will advance cells every 1.5 seconds

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

adaptiveHeight

Changes height of carousel to fit height of selected slide.

adaptiveHeight: true

Use CSS transitions to transition height changes. But heads up: transitioning height triggers reflow and may cause poor performance.

adaptiveHeight: true
.flickity-viewport {
  transition: height 0.2s;
}

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: '';
  }
}

asNavFor

Use one Flickity carousel as navigation for another.

asNavFor requires draggable to be enabled, and will not work with draggable: false.

// 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;
}

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.

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. Default dragThreshold: 3.

dragThreshold: 10
// dragging doesn't start until 10px moved
// more room for vertical 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. 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
selectedAttraction: 0.01,
friction: 0.15
// lower attraction and lower friction
// slower transitions
// easier to flick past cells

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

UI

prevNextButtons

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

prevNextButtons: false
// Disable previous & next buttons

pageDots

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

pageDots: false
// Disable 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.

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

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'