Slider

Pages

Users

Hugh Jackman

hughjackman@left4code.com

Kevin Spacey

kevinspacey@left4code.com

Russell Crowe

russellcrowe@left4code.com

Christian Bale

christianbale@left4code.com

Products

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

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-8.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 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-12.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag