Modern Image Carousel Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Image Carousel</title>
    
    
  
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="flex items-center justify-center min-h-screen p-4">

<button id="prev-btn" class="absolute top-1/2 left-4 -translate-y-1/2 bg-white bg-opacity-70 text-blue-700 p-3 rounded-full shadow-lg hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-all duration-300 transform -translate-x-full group-hover:translate-x-0">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
        </button>
        <button id="next-btn" class="absolute top-1/2 right-4 -translate-y-1/2 bg-white bg-opacity-70 text-blue-700 p-3 rounded-full shadow-lg hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-all duration-300 transform translate-x-full group-hover:translate-x-0">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </button>

<div id="pagination-dots" class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
            
        </div>
    </div>

</body>
</html>

CSS

/* Custom styles for the Inter font and smooth transitions */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f4f8; /* Light background for contrast */
        }
        .carousel-container {
            overflow: hidden;
        }
        .carousel-images {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-images img {
            min-width: 100%; /* Ensure images take full width of their container */
            display: block;
            object-fit: cover; /* Cover the area, cropping if necessary */
        }
        .pagination-dot {
            transition: background-color 0.3s ease;
        }
        .pagination-dot.active {
            background-color: #3b82f6; /* Blue-500 for active dot */
        }
        /* Custom scrollbar for aesthetic purposes, though not strictly needed for carousel */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const carouselImages = document.getElementById('carousel-images');
            const images = carouselImages.querySelectorAll('img');
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            const paginationDotsContainer = document.getElementById('pagination-dots');
            let currentIndex = 0;
            const totalImages = images.length;
            let autoSlideInterval;

// Function to update carousel position
            const updateCarousel = () => {
                carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;
                updatePaginationDots();
            };

// Function to create and update pagination dots
            const createPaginationDots = () => {
                paginationDotsContainer.innerHTML = ''; // Clear existing dots
                for (let i = 0; i < totalImages; i++) {
                    const dot = document.createElement('button');
                    dot.classList.add('w-3', 'h-3', 'bg-gray-300', 'rounded-full', 'pagination-dot', 'focus:outline-none');
                    dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
                    dot.addEventListener('click', () => {
                        currentIndex = i;
                        updateCarousel();
                        resetAutoSlide();
                    });
                    paginationDotsContainer.appendChild(dot);
                }
                updatePaginationDots();
            };

// Function to update active dot
            const updatePaginationDots = () => {
                const dots = paginationDotsContainer.querySelectorAll('.pagination-dot');
                dots.forEach((dot, index) => {
                    if (index === currentIndex) {
                        dot.classList.add('active');
                        dot.classList.remove('bg-gray-300');
                    } else {
                        dot.classList.remove('active');
                        dot.classList.add('bg-gray-300');
                    }
                });
            };

// Next image handler
            const showNextImage = () => {
                currentIndex = (currentIndex + 1) % totalImages;
                updateCarousel();
            };

// Previous image handler
            const showPrevImage = () => {
                currentIndex = (currentIndex - 1 + totalImages) % totalImages;
                updateCarousel();
            };

// Auto-slide functionality
            const startAutoSlide = () => {
                autoSlideInterval = setInterval(showNextImage, 3000); // Change image every 3 seconds
            };

const stopAutoSlide = () => {
                clearInterval(autoSlideInterval);
            };

const resetAutoSlide = () => {
                stopAutoSlide();
                startAutoSlide();
            };

// Event Listeners
            nextBtn.addEventListener('click', () => {
                showNextImage();
                resetAutoSlide();
            });

prevBtn.addEventListener('click', () => {
                showPrevImage();
                resetAutoSlide();
            });

// Pause auto-slide on hover
            const carouselWrapper = document.querySelector('.group');
            carouselWrapper.addEventListener('mouseenter', stopAutoSlide);
            carouselWrapper.addEventListener('mouseleave', startAutoSlide);

// Initialize carousel
            createPaginationDots();
            updateCarousel();
            startAutoSlide();
        });

Modern Image Carousel Template Preview

Download Options