Slider

Pages

Users

Arnold Schwarzenegger

arnoldschwarzenegger@left4code.com

Brad Pitt

bradpitt@left4code.com

Morgan Freeman

morganfreeman@left4code.com

Johnny Depp

johnnydepp@left4code.com

Products

Notifications

Arnold Schwarzenegger

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

Brad Pitt

03:20 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

Morgan Freeman

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

Johnny Depp

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

Al Pacino

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

Single Item

Show code

1

                                        <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

1

2

3

                                        <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

                                        <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

1

                                        <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-12.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-1.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>
                                    