Slider
Single Item
Show example code
slide 2 of 6
6
1
2
3
4
5
6
1
<div class="mx-6">
<div class="single-item">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">1</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">2</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">3</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">4</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">5</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">6</h3>
</div>
</div>
</div>
</div>
Multiple Item
Show example code
slide 4 to 6 of 9
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
<div class="mx-6">
<div class="multiple-items">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">1</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">2</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">3</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">4</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">5</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">6</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">7</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">8</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">9</h3>
</div>
</div>
</div>
</div>
Responsive Display
Show example code
slide 5 to 7 of 8
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
<div class="mx-6 pb-8">
<div class="responsive-mode">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">1</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">2</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">3</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">4</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">5</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">6</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">7</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">8</h3>
</div>
</div>
</div>
</div>
Center Mode
Show example code
slide 2 to 4 of 6
5
6
1
2
3
4
5
6
1
2
<div class="mx-6">
<div class="center-mode">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">1</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">2</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">3</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">4</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">5</h3>
</div>
</div>
<div class="h-32 px-2">
<div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">6</h3>
</div>
</div>
</div>
</div>
Fade Animation
Show example code
slide 1 of 3
<div class="mx-6 pb-8">
<div class="fade-mode">
<div class="h-64 px-2">
<div class="h-full image-fit rounded-md overflow-hidden"> <img alt="Midone Tailwind HTML Admin Template" src="dist/images/preview-7.jpg" /> </div>
</div>
<div class="h-64 px-2">
<div class="h-full image-fit rounded-md overflow-hidden"> <img alt="Midone Tailwind HTML Admin Template" src="dist/images/preview-10.jpg" /> </div>
</div>
<div class="h-64 px-2">
<div class="h-full image-fit rounded-md overflow-hidden"> <img alt="Midone Tailwind HTML Admin Template" src="dist/images/preview-15.jpg" /> </div>
</div>
</div>
</div>