Skip to main content

Flickity

Touch, responsive, flickable carousels.

How to install?

Paste the following css link source before </head>

<link rel="stylesheet" href="src/plugins/flickity/dist/flickity.min.css">
Copy

And paste the following <script>s near the end of your pages before </body>

<!-- plugins -->
<script src="src/plugins/flickity/dist/flickity.pkgd.min.js"></script>
Copy

Basic Example


<div id="thumbnail-slider" class="mb-7 mb-lg-3 carousel" data-flickity='{ "cellAlign": "left", "wrapAround": true, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
  <div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
    <img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking1.jpg">
  </div>
  <div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
    <img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking2.jpg">
  </div>
  <div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
    <img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking3.jpg">
  </div>
</div>
Copy

If want to use dark navigation and light dots, use following code .nav-dark-button and .nav-light-dots

Make navigation inset .nav-inset-button


<div id="thumbnail-slider" class="mb-7 mb-lg-3 carousel nav-inset-button nav-dark-button nav-light-dots" data-flickity='{ "cellAlign": "left", "wrapAround": true, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
  <div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
    <img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking1.jpg">
  </div>
  <div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
    <img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking2.jpg">
  </div>
  <div class="carousel-cell text-center mb-4 col-12 col-md-6 px-2">
    <img alt="title" class="w-100 img-fluid" src="assets/img-min/section/coworking3.jpg">
  </div>
</div>
Copy

For responsive design, you can use Bootstrap responsive grid

More example slider in Reviews section and Hero slider

Plugin documentation

For more detailed information, see the official documentation: Flickity.