Options

• Setup
• cellSelector
• initialIndex
• accessibility
• setGallerySize
• resize
• Cell position
• cellAlign
• contain
• imagesLoaded
• percentPosition
• rightToLeft
• Behavior
• draggable
• freeScroll
• wrapAround
• lazyLoad
• autoPlay
• watchCSS
• asNavFor
• selectedAttraction & friction
• freeScrollFriction
• UI
• prevNextButtons
• pageDots
• arrowShape

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

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

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

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

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>

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

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

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

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

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.

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

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

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'