Flickity

How it works

Bootnews has taken the advantage of Flickity and extended it with dozens of new options. The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

How to use?

This plugin css available in scss file assets/scss/theme/slider/_carousel.scss

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

            
              <script src="../../assets/vendor/flickity/dist/flickity.pkgd.min.js"></script>
            
          

Example Slider

            
              <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/568x484/img1.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/568x484/img2.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/568x484/img3.jpg">
                </div>
              </div>
            
          

Official Documentation

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