Slider
Single Item
Show code
6
1
2
3
4
5
6
1
2
3
4
5
6
<div class="slider mx-6 single-item">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 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 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 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 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 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 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">6</h3>
</div>
</div>
</div>Multiple Item
Show code
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
<div class="slider mx-6 multiple-items">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 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 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 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 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 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 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 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 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 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">9</h3>
</div>
</div>
</div>Responsive Display
Show code
1
2
3
4
5
6
7
8
<div class="slider mx-6 responsive-mode">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 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 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 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 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 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 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 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 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">8</h3>
</div>
</div>
</div>Center Mode
Show code
5
6
1
2
3
4
5
6
1
2
3
4
5
6
<div class="slider mx-6 center-mode">
<div class="h-32 px-2">
<div class="h-full bg-gray-200 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 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 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 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 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 rounded-md">
<h3 class="h-full font-medium flex items-center justify-center text-2xl">6</h3>
</div>
</div>
</div>Fade Animation
Show code
<div class="slider mx-6 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-4.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-5.jpg" /> </div>
</div>
</div>