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

3.1k

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

omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

8 months ago

1.2k
responsive slider carousel
slider carousel

Author:
Abhiraj

1 year ago

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

Author:
ORGIN_DREAMS

1 year ago

2k
Simple Animated Carousel
A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

Author:
Nick Girga

1 year ago

1.9k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

2 years ago

9.9k
carousel

Author:
Crimson

1 year ago

3.5k
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:
Salah eldein

10 months ago

479
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Author:
Azeem warraich

2 weeks ago

110
Slider
Responsive slider

Author:
Abhiraj

1 year ago

3k
Carousel

Author:
Crimson

1 year ago

8.3k
card section neon
card section neon

Author:
Omer fils ELENGA

7 months ago

1.3k
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

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components