Flickity

How to install?

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>
                
              

                
              	<div id="thumbnail-slider" class="carousel" data-flickity='{ "cellAlign": "left", "wrapAround": true, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
		              <div class="carousel-cell text-center mb-6 w-full md:w-1/2 px-2">
		                <img alt="title" class="w-100 max-w-full h-auto" src="src/img-min/project/project_1.jpg">
		              </div>
		              <div class="carousel-cell text-center mb-6 w-full md:w-1/2 px-2">
		                <img alt="title" class="w-100 max-w-full h-auto" src="src/img-min/project/project_2.jpg">
		              </div>
		              <div class="carousel-cell text-center mb-6 w-full md:w-1/2 px-2">
		                <img alt="title" class="w-100 max-w-full h-auto" src="src/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

RTL Options

Please add following option in rtl mode:

                
                  "rightToLeft": true, "cellAlign": "right"
                
              

Plugin documentation

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