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

954

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.4k
responsive slider carousel
slider carousel

Author:
Abhiraj

10 months ago

2.2k
Slider
Responsive slider

Author:
Abhiraj

10 months ago

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

Author:
ORGIN_DREAMS

6 months ago

959
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5.1k
Testimonials

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

7 months ago

1.6k
Carousel

Author:
Juraj

9 months ago

2.2k
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Author:
Juraj

6 months ago

1.4k
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

621
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

60.3k
GALLERY

Author:
ORGIN_DREAMS

6 months ago

838
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

7 months ago

874

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components