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

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

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

1 month ago

191
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

2 months ago

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

Author:
Maxim

1 year ago

11.7k
carousel

Author:
Crimson

6 months ago

1.8k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

2 years ago

30.5k
responsive slider carousel
slider carousel

Author:
Abhiraj

6 months ago

1.8k
Image carousel
Uses Flowbite

Author:
Anonymous

7 months ago

1.9k
Testimonials

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

3 months ago

1k
Image Carousel

Author:
Nikolai

1 year ago

6.2k
Carousel

Author:
Juraj

5 months ago

1.4k
Nice and simple carousel
Nice and simple carousel, fully responsive.

Author:
dev cheick

11 months ago

2.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

311

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components