Our Shoe Collection Slider | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shoe Manufacturer Slider</title>
   
</head>

<body>

<section class="slider-section">
        <h2> Our Shoe Collection</h2>
        <p>High-quality shoes manufactured with style, comfort, and durability.</p>

<div class="slide">
                    <img src="https://images.unsplash.com/photo-1521774971864-62e842046145?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHNuZWFrZXJ8ZW58MHx8MHx8fDA%3D"
                        alt="Sports Shoes">
                    <div class="slide-content">
                        <h3>Sports Shoes</h3>
                        <p>Lightweight and comfortable, perfect for running & gym.</p>
                        <div class="price">₹1,299</div>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                </div>

<div class="slide">
                    <img src="https://images.unsplash.com/photo-1580906853149-f82f7601d205?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fGZvb3R3ZWFyfGVufDB8fDB8fHww"
                        alt="Casual Shoes">
                    <div class="slide-content">
                        <h3>Casual Shoes</h3>
                        <p>Stylish and trendy casual shoes for everyday wear.</p>
                        <div class="price">₹899</div>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                </div>

<div class="slide">
                    <img src="https://images.unsplash.com/photo-1556774687-0e2fdd0116c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGZvb3R3ZWFyfGVufDB8fDB8fHww"
                        alt="Formal Shoes">
                    <div class="slide-content">
                        <h3>Formal Shoes</h3>
                        <p>Elegant leather shoes for office and formal occasions.</p>
                        <div class="price">₹1,499</div>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                </div>

<div class="slide">
                    <img src="https://images.unsplash.com/photo-1465453869711-7e174808ace9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGZvb3R3ZWFyfGVufDB8fDB8fHww"
                        alt="Sneakers">
                    <div class="slide-content">
                        <h3>Sneakers</h3>
                        <p>Comfortable sneakers designed for daily wear & sports.</p>
                        <div class="price">₹1,199</div>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                </div>

<div class="slide">
                    <img src="https://images.unsplash.com/photo-1529810313688-44ea1c2d81d3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Zm9vdHdlYXJ8ZW58MHx8MHx8fDA%3D"
                        alt="Boots">
                    <div class="slide-content">
                        <h3>Boots</h3>
                        <p>Durable and stylish boots for outdoor adventures.</p>
                        <div class="price">₹1,799</div>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                </div>

</div>
            <div class="dots"></div>
        </div>
    </section>

</body>

</html>

CSS

:root {
            --primary: #1e1e1e;
            --secondary: #f5f5f5;
            --btn: #ff5722;
            --text: #222;
        }

body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            background: var(--secondary);
            color: var(--text);
        }

.slider-section {
            padding: 60px 5%;
            text-align: center;
        }

.slider-section h2 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            color: var(--primary);
        }

.slider-section p {
            font-size: 1.1rem;
            margin-bottom: 40px;
            opacity: 0.8;
        }

.slider-container {
            position: relative;
            overflow: hidden;
            max-width: 1200px;
            margin: auto;
        }

.slider-track {
            display: flex;
            gap: 25px;
            transition: transform 0.6s ease;
        }

.slide {
            min-width: 300px;
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            text-align: center;
            flex-shrink: 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.slide:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

.slide img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

.slide:hover img {
            transform: scale(1.08);
        }

.slide-content {
            padding: 15px;
        }

.slide-content h3 {
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: var(--primary);
        }

.slide-content p {
            font-size: 0.95rem;
            margin-bottom: 10px;
            min-height: 40px;
        }

.price {
            font-weight: bold;
            font-size: 1.1rem;
            color: var(--btn);
        }

.btn {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 20px;
            background: var(--btn);
            color: white;
            border-radius: 25px;
            text-decoration: none;
            font-size: 0.9rem;
            transition: 0.3s;
        }

.btn:hover {
            background: #e64a19;
        }

.arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
            background: var(--primary);
            color: white;
            padding: 12px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            transition: 0.3s;
        }

.arrow:hover {
            background: #444;
        }

.arrow.left {
            left: -25px;
        }

.arrow.right {
            right: -25px;
        }

.dots {
            text-align: center;
            margin-top: 20px;
        }

.dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

.dot.active {
            background: var(--primary);
        }

@media(max-width:1024px) {
            .slide {
                min-width: 250px
            }
        }

@media(max-width:768px) {
            .slide {
                min-width: 220px
            }
        }

@media(max-width:480px) {
            .slide {
                min-width: 180px
            }
        }

JavaScript

const track = document.querySelector('.slider-track');
        const slides = Array.from(document.querySelectorAll('.slide'));
        const prev = document.querySelector('.arrow.left');
        const next = document.querySelector('.arrow.right');
        const dotsContainer = document.querySelector('.dots');

let index = 0;
        let slideWidth = slides[0].offsetWidth + 25;
        let autoplay;

// create dots
        slides.forEach((_, i) => {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            dot.addEventListener('click', () => { goToSlide(i) });
            dotsContainer.appendChild(dot);
        });
        const dots = Array.from(document.querySelectorAll('.dot'));

function updateSlider() {
            track.style.transform = `translateX(${-index * slideWidth}px)`;
            dots.forEach(d => d.classList.remove('active'));
            dots[index % slides.length].classList.add('active');
        }

function goToSlide(i) {
            index = i;
            updateSlider();
            resetAutoplay();
        }

function nextSlide() {
            index++;
            if (index >= slides.length) index = 0;
            updateSlider();
        }

function prevSlide() {
            index--;
            if (index < 0) index = slides.length - 1;
            updateSlider();
        }

next.addEventListener('click', nextSlide);
        prev.addEventListener('click', prevSlide);

track.addEventListener('mouseenter', stopAutoplay);
        track.addEventListener('mouseleave', startAutoplay);

window.addEventListener('resize', () => { slideWidth = slides[0].offsetWidth + 25 });

updateSlider();
        startAutoplay();

Our Shoe Collection Slider Preview

Download Options