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

2.5k

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

Testimonials

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

11 months ago

1.7k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

9 months ago

1.8k
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

2 months ago

471
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

287
grid masoneri
grid masoneri

Author:
Omer fils ELENGA

2 months ago

85
Slider
Responsive slider

Author:
Abhiraj

1 year ago

2.4k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

2 months ago

134
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

10 months ago

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

4 months ago

426
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

4 months ago

327
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

1 month ago

130
Image carousel
Uses Flowbite

Author:
Anonymous

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components