Flickity

Touch, responsive, flickable carousels.
Plugin documentation

<div data-flickity='{"prevNextButtons": true}'>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-25.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-26.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-27.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-28.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-29.jpg" class="img-fluid" alt="...">
  </div>
</div>


Responsive initialization

Easily initialize Flickity depending on the viewport width with .flickity-{breakpoint} or .flickity-{breakpoint}-none modifiers. Flickity will be enabled or disabled at the specified and all subsequent breakpoints. Requires watchCSS to be set to true.

<div class="flickity-none flickity-md" data-flickity='{"watchCSS": true}'>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-25.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-26.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-27.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-28.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-29.jpg" class="img-fluid" alt="...">
  </div>
</div>


Progress

Turn page dots into a progress bar with the .flickity-page-dots-progress modifier. Requires pageDots to be set to true.

<div class="flickity-page-dots-progress" data-flickity='{"pageDots": true}'>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-25.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-26.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-27.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-28.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-29.jpg" class="img-fluid" alt="...">
  </div>
</div>


Inner dots

Move page dots inside the flickity container with the .flickity-page-dots-inner modifier. Requires pageDots to be set to true.

<div class="flickity-page-dots-inner" data-flickity='{"pageDots": true}'>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-25.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-26.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-27.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-28.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-29.jpg" class="img-fluid" alt="...">
  </div>
</div>


Large buttons

Increase the size of the Flickity buttons with the .flickity-buttons-lg modifier. Requires prevNextButtons to be set to true.

<div class="flickity-buttons-lg" data-flickity='{"prevNExtButtons": true}'>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-25.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-26.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-27.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-28.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-29.jpg" class="img-fluid" alt="...">
  </div>
</div>


Offset buttons

Move the Flickity buttons in the bottom left corner with the .flickity-buttons-bottom-start modifier. Requires prevNextButtons to be set to true.

<div class="flickity-buttons-bottom-start" data-flickity='{"prevNExtButtons": true}'>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-25.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-26.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-27.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-28.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-3 px-1">
    <img src="../assets/img/products/product-29.jpg" class="img-fluid" alt="...">
  </div>
</div>