Options

• Setup
• cellSelector
• initialIndex
• accessibility
• setGallerySize
• resize
• Cell position
• cellAlign
• contain
• imagesLoaded
• percentPosition
• rightToLeft
• Dragging
• draggable
• freeScroll
• Behavior
• wrapAround
• autoPlay
• watchCSS
• asNavFor
• UI
• prevNextButtons
• pageDots

Setup

cellSelector

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

cellSelector: '.gallery-cell'

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

initialIndex

Zero-based index of the initial selected cell.

initialIndex: 2

accessibility

Enable keyboard navigation. Users can tab to a Flickity gallery, 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 gallery to the height of the tallest cell. Enabled by default setGallerySize: true.

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

setGallerySize: false

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

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

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

setGallerySize: false

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

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

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

resize

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

resize: false
// disables resize logic

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

Cell position

cellAlign

Align cells within the gallery element.

cellAlign: 'left'

// default cellAlign: 'center'

cellAlign: 'right'

contain

Contains cells to gallery 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: false
// sets cell position in percentages

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

percentPosition: false
// sets cell position in pixels

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

rightToLeft

Enables right-to-left layout.

rightToLeft: true

Dragging

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

Behavior

wrapAround

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

wrapAround: true

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

watchCSS

You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the gallery 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 */
.gallery:after {
  content: 'flickity';
  display: none; /* hide :after */
}

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

asNavFor

Use one Flickity gallery as navigation for another.

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

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

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

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

UI

prevNextButtons

prevNextButtons: false
// Disable previous & next buttons

pageDots

pageDots: false
// Disable page dots