Options

• Behavior
• draggable
• freeScroll
• wrapAround
• groupCells
• autoPlay
• fullscreen
• fade
• adaptiveHeight
• watchCSS
• asNavFor
• hash
• dragThreshold
• selectedAttraction & friction
• freeScrollFriction
• Images
• imagesLoaded
• lazyLoad
• bgLazyLoad
• Setup
• cellSelector
• initialIndex
• accessibility
• setGallerySize
• resize
• Cell position
• cellAlign
• contain
• percentPosition
• rightToLeft
• UI
• prevNextButtons
• pageDots
• arrowShape

Behavior

draggable

Enables dragging and flicking. Enabled by default when carousel has 2 or more slides draggable: '>1'.

// Enable dragging with at least 2 slides
// set by default
// draggable: '>1'

// Disable dragging
draggable: false

// Disable dragging when only 1 slide
// set by default
// draggable: '>1'

// enable dragging, even with only 1 slide
draggable: true

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

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

fullscreen

Enables fullscreen view of carousel. Adds button to view and exit fullscreen. In fullscreen view, pressing ESC will exit fullscreen.

fullscreen: true

/* .is-fullscreen added to carousel when fullscreen
   size cells to full height when fullscreen */
.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

For fullscreen image carousels, use CSS to center images in cells. This demo shows one cell each in the viewport, centering with flexbox.

fullscreen: true,
lazyLoad: 1

<div class="carousel">
  <div class="carousel-cell">
    <img data-flickity-lazyload="orange-tree.jpg" />
  </div>
  <div class="carousel-cell">
    <img data-flickity-lazyload="tulip.jpg" />
  </div>
  ...
</div>

.carousel-cell {
  width: 100%; /* full width */
  height: 200px;
  background: #222;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

.carousel-cell img {
  display: block;
  max-height: 100%;
}

Edit this demo on CodePen

This demo shows multiple cells in the viewport, using images’ natural sizes for cell size, vertically centered using transform.

fullscreen: true,
lazyLoad: 2

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

.carousel-image {
  display: block;
  height: 200px;
  /* set min-width,
     allow images to determine cell width */
  min-width: 150px;
  max-width: 100%;
  margin-right: 10px;
  /* vertically center */
  top: 50%;
  transform: translateY(-50%)
}

.carousel.is-fullscreen .carousel-image {
  height: auto;
  max-height: 100%;
}

Edit this demo on CodePen

fade

Fades between transitioning slides instead of moving.

fade: true

Edit this demo on CodePen

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

watchCSS: true
// enable Flickity in CSS when
// element:after { content: 'flickity' }

/* 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.

• Clicking the nav carousel will select the content carousel.
• Selecting a cell in the content carousel will sync to the nav carousel.

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

hash

Enables hash navigation to select slides with links and URLs. Changes page URL to selected cell id.

hash: true

<!-- add ids to cell elements -->
<div class="carousel">
  <div class="carousel-cell" id="carousel-cell1">
    ...</div>
  <div class="carousel-cell" id="carousel-cell2">
    ...</div>
  <div class="carousel-cell" id="carousel-cell3">
    ...</div>
  ...
</div>

<!-- link to cells -->
<a href="#carousel-cell2">View cell 2</a>

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

Images

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

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.

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

Edit this demo on CodePen

Set the image's srcset with data-flickity-lazyload-srcset. You can also set data-flickity-lazyload-src as well to set src for browsers that do not support srcset.

lazyLoad: true

<img class="carousel-cell-image"
  data-flickity-lazyload-srcset="
    walrus-large.jpg 720w,
    walrus-med.jpg 360w"
  sizes="(min-width: 1024px) 720px, 360px"
  data-flickity-lazyload-src="walrus-large.jpg"
  />

Edit this demo on CodePen

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;
  height: 200px;
}

Edit this demo on CodePen

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.

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>

initialIndex

Zero-based index of the initial selected cell.

initialIndex: 2

Set to a selector string to select the slide with that cell.

initialIndex: '.is-initial-select'

<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell is-initial-select"></div>
<div class="carousel-cell"></div>

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.

contain: true

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

UI

prevNextButtons

prevNextButtons: false
// Disable previous & next buttons

pageDots

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.

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'