A slideshow component for cycling through elements—images or slides of text—like a carousel.

How to install

By default Tailwind css doesnot support carousel, so we need to depend on other third parties library to achieve this. So we will achieve tailwind carousel using Flickity js.

Step 1: Add Flickity js before </body> html

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

Step 2: Add slider code in html

			                
			                  <!-- carousel slider -->
			                  <div id="thumbnail-slider" class="mb-12 lg:mb-6 nav-inset-button carousel -mx-2" data-flickity='{ "cellAlign": "left", "wrapAround": true, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
			                    <div class="max-w-full w-full px-2">
			                      <img alt="title" class="w-full h-auto max-w-auto" src="src/img/project/project_1.jpg">
			                    </div>
			                    <div class="max-w-full w-full px-2">
			                      <img alt="title" class="w-full h-auto max-w-auto" src="src/img/project/project_2.jpg">
			                    </div>
			                    <div class="max-w-full w-full px-2">
			                      <img alt="title" class="w-full h-auto max-w-auto" src="src/img/project/project_3.jpg">
			                    </div>
			                  </div>
			                
			              

Step 3: Edit responsive slider code with editing <div class="max-w-full w-full px-2"> replace with other responsive width class, For example <div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-2">.

For more documentation about Flickity slider read in here Flickity