slider /carousel

simple slider or carousel

This tailwind example is contributed by Omer fils ELENGA, on 01-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Carousel Image gallery Range Slider

Author Omer fils ELENGA

Tailwind v3.4 1.7k 5

Fork Fullscreen

<div id="slider-dots" class="flex justify-center mt-4 space-x-2">
        
    </div>
</div>

const slider = document.getElementById('slider');
        const dotsContainer = document.getElementById('slider-dots');
        let currentSlide = 0;
        let autoScrollInterval;

// Create slides
        slides.forEach((slide, index) => {
            // Create slide element
            const slideElement = document.createElement('div');
            slideElement.className = 'slide flex-shrink-0';
            slideElement.dataset.slideId = slide.id;
            
            const img = document.createElement('img');
            img.src = slide.src;
            img.alt = slide.alt;
            img.className = 'slide-img ';
            
            slideElement.appendChild(img);
            slider.appendChild(slideElement);

// Create dot
            const dot = document.createElement('div');
            dot.className = 'dot';
            dot.dataset.slideIndex = index;
            dot.addEventListener('click', () => goToSlide(index));
            dotsContainer.appendChild(dot);
        });

// Initialize first dot as active
        dotsContainer.children[0].classList.add('active');

// Handle scroll events to update active dot
        slider.addEventListener('scroll', debounce(updateActiveDot, 100));

// Auto-scroll functionality
        function startAutoScroll() {
            autoScrollInterval = setInterval(() => {
                currentSlide = (currentSlide + 1) % slides.length;
                goToSlide(currentSlide);
            }, 5000);
        }

function stopAutoScroll() {
            clearInterval(autoScrollInterval);
        }

// Go to specific slide
        function goToSlide(index) {
            currentSlide = index;
            const slide = slider.children[index];
            slider.scrollTo({
                left: slide.offsetLeft - (slider.offsetWidth - slide.offsetWidth) / 2,
                behavior: 'smooth'
            });
            updateDots();
        }

// Update active dot
        function updateDots() {
            Array.from(dotsContainer.children).forEach((dot, index) => {
                dot.classList.toggle('active', index === currentSlide);
            });
        }

// Update active dot based on scroll position
        function updateActiveDot() {
            const sliderRect = slider.getBoundingClientRect();
            const sliderCenter = sliderRect.left + sliderRect.width / 2;
            
            Array.from(slider.children).forEach((slide, index) => {
                const slideRect = slide.getBoundingClientRect();
                const slideCenter = slideRect.left + slideRect.width / 2;
                
                if (Math.abs(slideCenter - sliderCenter) < slideRect.width / 2) {
                    currentSlide = index;
                    updateDots();
                }
            });
        }

// Debounce function to limit how often a function is called
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(context, args);
                }, wait);
            };
        }

// Pause auto-scroll when user interacts with slider
        slider.addEventListener('mouseenter', stopAutoScroll);
        slider.addEventListener('touchstart', stopAutoScroll);
        slider.addEventListener('mouseleave', startAutoScroll);
        slider.addEventListener('touchend', startAutoScroll);

// Start auto-scroll
        startAutoScroll();
    });
</script>
</center>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.1k
Slider
Responsive slider

Abhiraj

1 year ago

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

ORGIN_DREAMS

1 year ago

2k
Avant & Après
Avant & Après

Omer fils ELENGA

9 months ago

890
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

Omer fils ELENGA

8 months ago

727
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

8 months ago

629
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

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

Ayyamperumal S

8 months ago

930
pile carde scroll
pile carde scroll

Omer fils ELENGA

7 months ago

592
PlayStore Style Carousel
PlayStore Style Carousel

Omer fils ELENGA

7 months ago

400
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

7 months ago

374