Flickity

How to install?

Paste the following css link source before </head>

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

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>
            
          

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/project/project_1.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/project/project_2.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/project/project_3.jpg">
                </div>
              </div>
            
          

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/project/project_1.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/project/project_2.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/project/project_3.jpg">
                </div>
              </div>
            
          

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.