Home
Hielke Brandsma
Simple Multi-Purpose Slider

Simple Multi-Purpose Slider

This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content.

I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

This tailwind example is contributed by Hielke Brandsma, on 13-Nov-2024. Component is made with Tailwind CSS v3. It is responsive.

Carousel

Author Hielke Brandsma

1.8k

Fork Fullscreen

<div id="slides" class="flex w-full transition-transform duration-500 ease-in-out 
                peer-checked/slide1:translate-x-0 
                peer-checked/slide2:-translate-x-full 
                peer-checked/slide3:-translate-x-[200%]">
                <div class="slide pb-16 min-w-full bg-blue-500 text-white text-center">
                    <h2 class="title text-blue-500">Slide 1 Title</h2>
                    <div class="content p-6">
                        <h3 class="subtitle">Slide 1 subtitle</h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at viverra nibh. Praesent a porta enim, in rutrum metus. Quisque pretium sagittis consectetur. Integer ornare eleifend urna sed consectetur. Suspendisse condimentum ut dolor in euismod.
                        </p>
                    </div>
                </div>
                <div class="slide bg-green-500">
                    <h2 class="title text-green-500">Slide 2 Title</h2>
                    <div class="content p-6">
                        <h3 class="subtitle">Slide 2 subtitle</h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at viverra nibh. Praesent a porta enim, in rutrum metus. Quisque pretium sagittis consectetur. Integer ornare eleifend urna sed consectetur. Suspendisse condimentum ut dolor in euismod.
                        </p>
                    </div>
                </div>
                <div class="slide bg-red-500">
                    <h2 class="title text-red-500">Slide 3 Title</h2>
                    <div class="content p-6">
                        <h3 class="subtitle">Slide 3 subtitle</h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at viverra nibh. Praesent a porta enim, in rutrum metus. Quisque pretium sagittis consectetur. Integer ornare eleifend urna sed consectetur. Suspendisse condimentum ut dolor in euismod.
                        </p>
                    </div>
                </div>
            </div>

<label for="slide1"
                class="bullet p-1 -translate-x-full peer-checked/slide1:font-bold peer-checked/slide1:scale-125">
                <span class="bg-white w-full h-full rounded-full">1</span>
            </label>
            <label for="slide2"
                class="bullet p-1 peer-checked/slide2:font-bold peer-checked/slide2:scale-125">
                <span class="bg-white w-full h-full rounded-full">2</span>    
            </label>
            <label for="slide3"
                class="bullet p-1 translate-x-full peer-checked/slide3:font-bold peer-checked/slide3:scale-125">
                <span class="bg-white w-full h-full rounded-full">3</span>
            </label>
        
        </div>
    </div>

Related Examples

Slider
Responsive slider

Author:
Abhiraj

6 months ago

1.6k
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Author:
Juraj

3 months ago

657
carousel

Author:
Crimson

7 months ago

1.9k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

19.9k
Carousel

Author:
Crimson

7 months ago

4.6k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

11.9k
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

3 months ago

973
responsive slider carousel
slider carousel

Author:
Abhiraj

7 months ago

1.9k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

2 months ago

389
Image Carousel

Author:
Nikolai

1 year ago

6.4k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

3 months ago

594

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components