Slider

Pages

Users

Denzel Washington

denzelwashington@left4code.com

Bruce Willis

brucewillis@left4code.com

Brad Pitt

bradpitt@left4code.com

Arnold Schwarzenegger

arnoldschwarzenegger@left4code.com

Products

Notifications

Denzel Washington

01:10 PM

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

Bruce Willis

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

01:10 PM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Arnold Schwarzenegger

05:09 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

Brad Pitt

01:10 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

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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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 dark:bg-dark-1 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-7.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-15.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-13.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag