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

884

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.1k
Slider
Responsive slider

Author:
Abhiraj

9 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

5 months ago

856
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Simple range slider

Author:
Nour Haider

2 years ago

15.4k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

10 months ago

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

Author:
dev cheick

1 year ago

3.6k
Simple Footer 2

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

11 months ago

1.9k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

20.3k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

5 months ago

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

Author:
Brandon D

3 years ago

31.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components