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

833

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

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

1 year ago

8.2k
responsive slider carousel
slider carousel

Author:
Abhiraj

9 months ago

2.1k
Slider
Responsive slider

Author:
Abhiraj

8 months ago

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
BONIMATOR Game Portal
BONIMATOR Game Portal

Author:
Bonimater

1 month ago

146
an off line game of catching afox
an off line game of catching afox

Author:
Bonimater

4 months ago

252
slider models
Tailwind slider models

Author:
QQ-VVN

5 months ago

453
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

4 months ago

936
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:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

1k
gallary
html , css

Author:
Hacker Development

5 months ago

420
Gallery
Masonry Grid

Author:
Aman kumar

1 year ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components