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.9k

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

Image carousel
Uses Flowbite

Author:
Anonymous

10 months ago

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

Author:
ORGIN_DREAMS

4 months ago

692
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.5k
Carousel

Author:
Crimson

8 months ago

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

Author:
Juraj

4 months ago

1.3k
carousel

Author:
Crimson

8 months ago

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

Author:
Maxim

1 year ago

12.3k
Image Carousel

Author:
Nikolai

1 year ago

6.6k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

3 months ago

907
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

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

Author:
Anonymous

1 year ago

20.2k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

8.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components