Home
Omer fils ELENGA
slider /carousel

slider /carousel

simple slider or carousel

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

Carousel Image gallery Range Slider

Author Omer fils ELENGA

255

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

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

1 year ago

7.3k
responsive slider carousel
slider carousel

Author:
Abhiraj

5 months ago

1.5k
Slider
Responsive slider

Author:
Abhiraj

4 months ago

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

Author:
ORGIN_DREAMS

3 weeks ago

89
gallary
html , css

Author:
Hacker Development

1 month ago

116
Carousel

Author:
Juraj

4 months ago

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

Author:
dev cheick

10 months ago

2.7k
carousel

Author:
Crimson

5 months ago

1.6k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.2k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

281
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

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

Author:
Brandon D

2 years ago

30.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components