Slider

Single Item

Show code

1

2

3

4

5

6

HTMLOpenTagdiv class="slider mx-6 single-item"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Multiple Item

Show code

1

2

3

4

5

6

7

8

9

HTMLOpenTagdiv class="slider mx-6 multiple-items"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag7HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag8HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag9HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Responsive Display

Show code

1

2

3

4

5

6

7

8

HTMLOpenTagdiv class="slider mx-6 responsive-mode"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag7HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag8HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Center Mode

Show code

1

2

3

4

5

6

HTMLOpenTagdiv class="slider mx-6 center-mode"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Fade Animation

Show code

HTMLOpenTagdiv class="slider mx-6 fade-mode"HTMLCloseTag HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template"src="dist/images/preview-4.jpg"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template"src="dist/images/preview-10.jpg"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template"src="dist/images/preview-5.jpg"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag