Pages
Users

Hugh Jackman
hughjackman@left4code.com

Kevin Spacey
kevinspacey@left4code.com

Russell Crowe
russellcrowe@left4code.com

Christian Bale
christianbale@left4code.com
Products

Apple MacBook Pro 13
PC &Laptop

Sony A7 III
Photography

Apple MacBook Pro 13
PC &Laptop

Samsung Galaxy S20 Ultra
Smartphone &Tablet
Notifications

Hugh Jackman
06:05 AM
Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Kevin Spacey
06:05 AM
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Russell Crowe
06:05 AM
Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Christian Bale
01:10 PM
Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Brad Pitt
03:20 PM
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

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-8.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-13.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-12.jpg" /> </div>
</div>
</div>