Options
BehaviordraggableEnables dragging and flicking. Enabled by default when carousel has 2 or more slides draggable: '>1'. Show // Enable dragging with at least 2 slides
// set by default
// draggable: '>1'
// Disable dragging
draggable: false
Edit this demo on CodePen // Disable dragging when only 1 slide
// set by default
// draggable: '>1'
// enable dragging, even with only 1 slide
draggable: true
freeScrollEnables 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 wrapAroundAt the end of cells, wrap-around to the other end for infinite scrolling. wrapAround: true
Edit this demo on CodePen groupCellsGroups 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
Edit this demo on CodePen groupCells: 2
// if set to a number, group cells by that number
Edit this demo on CodePen groupCells: '80%'
// if set to a percent string,
// group cells that fit in the percent of
// the width of the carousel viewport
Edit this demo on CodePen autoPlayAutomatically 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 fullscreenEnables fullscreen view of carousel. Adds button to view and exit fullscreen. In fullscreen view, pressing ESC will exit fullscreen. Fullscreen functionality requires the flickity-fullscreen package. It is not included in flickity.pkgd.js and must be installed separately. fullscreen: true
/* .is-fullscreen added to carousel when fullscreen
size cells to full height when fullscreen */
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
Edit this demo on CodePen 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 adaptiveHeightChanges height of carousel to fit height of selected slide. adaptiveHeight: true
Edit this demo on CodePen 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;
}
Edit this demo on CodePen watchCSSYou 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: '';
}
}
Edit this demo on CodePen asNavForUse one Flickity carousel as navigation for another.
// 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 Webpack or RequireJS without flickity.pkgd.js, you need to install and require flickity-as-nav-for separately. See details in Extras. hashEnables hash navigation to select slides with links and URLs. Changes page URL to selected cell id. Hash behavior option requires the flickity-hash package. It is not included in flickity.pkgd.js and must be installed separately. 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>
View: Cell 1, Cell 2, Cell 3, Cell 4, Cell 5 Edit this demo on CodePen View CodePen in debug mode to see URL hash change. dragThresholdThe 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
Edit this demo on CodePen selectedAttraction & frictionselectedAttraction 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 freeScrollFrictionSlows 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 ImagesimagesLoadedUnloaded 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 Webpack or RequireJS without flickity.pkgd.js, you need to install and require flickity-imagesloaded separately. See details in Extras. lazyLoadLoads 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 bgLazyLoadLoads cell background image when a cell is selected. bgLazyLoad requires the flickity-bg-lazyload package. This package is not included and must be installed separately. 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>
Edit this demo on CodePen 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
Edit this demo on CodePen After loading the background image, Flickity will add flickity-bg-lazyloaded class to the element, or flickity-lazyerror if the image was broken. SetupcellSelectorSpecify 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 initialIndexZero-based index of the initial selected cell. initialIndex: 2
Edit this demo on CodePen 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>
Edit this demo on CodePen accessibilityEnable 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 setGallerySizeSets 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 resizeAdjusts 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 positioncellAlignAlign 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 containContains 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 percentPositionSets 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 rightToLeftEnables right-to-left layout. rightToLeft: true
Edit this demo on CodePen UIprevNextButtonsCreates and enables previous & next buttons. Enabled by default prevNextButtons: true.prevNextButtons: false
// Disable previous & next buttons
Edit this demo on CodePen pageDotsCreates and enables page dots. Enabled by default pageDots: true.pageDots: false
// Disable page dots
Edit this demo on CodePen arrowShapeDraws 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 |
