Shoes Collection Slider 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>Shoe Collection | Premium Footwear</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Premium Shoe Collection</h1>
            <p>Discover comfort and style in every step</p>
        </div>

<div class="slider-container">
            <div class="slider">
                
                <div class="slide">
                    <div class="discount-badge">-25%</div>
                    <div class="shoe-image-container">
                        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Running Shoes" class="shoe-image">
                    </div>
                    <div class="shoe-details">
                        <h2 class="shoe-name">Ultra Run Pro</h2>
                        <div class="shoe-price">$89.99<span class="original-price">$119.99</span></div>
                        <p class="shoe-description">Lightweight running shoes with advanced cushioning technology for maximum comfort during long runs.</p>
                        <div class="shoe-features">
                            <span class="feature">Breathable</span>
                            <span class="feature">Cushioned</span>
                            <span class="feature">Lightweight</span>
                        </div>
                        <div class="sizes">
                            <button class="size-btn">7</button>
                            <button class="size-btn">8</button>
                            <button class="size-btn selected">9</button>
                            <button class="size-btn">10</button>
                            <button class="size-btn">11</button>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
                
                
                <div class="slide">
                    <div class="discount-badge">-20%</div>
                    <div class="shoe-image-container">
                        <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1464&q=80" alt="Casual Sneakers" class="shoe-image">
                    </div>
                    <div class="shoe-details">
                        <h2 class="shoe-name">Urban Street Sneakers</h2>
                        <div class="shoe-price">$74.99<span class="original-price">$94.99</span></div>
                        <p class="shoe-description">Stylish casual sneakers perfect for everyday wear with premium leather construction.</p>
                        <div class="shoe-features">
                            <span class="feature">Leather</span>
                            <span class="feature">Comfort Fit</span>
                            <span class="feature">Street Style</span>
                        </div>
                        <div class="sizes">
                            <button class="size-btn selected">8</button>
                            <button class="size-btn">9</button>
                            <button class="size-btn">10</button>
                            <button class="size-btn">11</button>
                            <button class="size-btn">12</button>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
                
                
                <div class="slide">
                    <div class="shoe-image-container">
                        <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1450&q=80" alt="Basketball Shoes" class="shoe-image">
                    </div>
                    <div class="shoe-details">
                        <h2 class="shoe-name">Court Dominance Pro</h2>
                        <div class="shoe-price">$129.99</div>
                        <p class="shoe-description">High-performance basketball shoes with superior ankle support and traction for the court.</p>
                        <div class="shoe-features">
                            <span class="feature">Ankle Support</span>
                            <span class="feature">High Traction</span>
                            <span class="feature">Performance</span>
                        </div>
                        <div class="sizes">
                            <button class="size-btn">9</button>
                            <button class="size-btn selected">10</button>
                            <button class="size-btn">11</button>
                            <button class="size-btn">12</button>
                            <button class="size-btn">13</button>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
                
                
                <div class="slide">
                    <div class="discount-badge">-30%</div>
                    <div class="shoe-image-container">
                        <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1365&q=80" alt="Hiking Boots" class="shoe-image">
                    </div>
                    <div class="shoe-details">
                        <h2 class="shoe-name">Trail Master Boots</h2>
                        <div class="shoe-price">$109.99<span class="original-price">$159.99</span></div>
                        <p class="shoe-description">Waterproof hiking boots with rugged traction for challenging terrain and outdoor adventures.</p>
                        <div class="shoe-features">
                            <span class="feature">Waterproof</span>
                            <span class="feature">Durable</span>
                            <span class="feature">Outdoor</span>
                        </div>
                        <div class="sizes">
                            <button class="size-btn">8</button>
                            <button class="size-btn">9</button>
                            <button class="size-btn selected">10</button>
                            <button class="size-btn">11</button>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
                
                
                <div class="slide">
                    <div class="shoe-image-container">
                        <img src="https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80" alt="Formal Shoes" class="shoe-image">
                    </div>
                    <div class="shoe-details">
                        <h2 class="shoe-name">Classic Oxford</h2>
                        <div class="shoe-price">$149.99</div>
                        <p class="shoe-description">Premium leather formal shoes with elegant design perfect for business and special occasions.</p>
                        <div class="shoe-features">
                            <span class="feature">Premium Leather</span>
                            <span class="feature">Formal</span>
                            <span class="feature">Elegant</span>
                        </div>
                        <div class="sizes">
                            <button class="size-btn selected">8</button>
                            <button class="size-btn">9</button>
                            <button class="size-btn">10</button>
                            <button class="size-btn">11</button>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
                
                
                <div class="slide">
                    <div class="discount-badge">-15%</div>
                    <div class="shoe-image-container">
                        <img src="https://images.unsplash.com/photo-1511556532299-8f662fc26c06?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fHNob2VzfGVufDB8fDB8fHww" alt="Slip-On" class="shoe-image">
                    </div>
                    <div class="shoe-details">
                        <h2 class="shoe-name">Easy Slip-On</h2>
                        <div class="shoe-price">$59.99<span class="original-price">$69.99</span></div>
                        <p class="shoe-description">Comfortable slip-on shoes with memory foam insole for all-day wear without laces.</p>
                        <div class="shoe-features">
                            <span class="feature">Slip-On</span>
                            <span class="feature">Memory Foam</span>
                            <span class="feature">Casual</span>
                        </div>
                        <div class="sizes">
                            <button class="size-btn">7</button>
                            <button class="size-btn selected">8</button>
                            <button class="size-btn">9</button>
                            <button class="size-btn">10</button>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: #f5f5f5;
            color: #333;
            line-height: 1.5;
            padding: 20px;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
        }

.header {
            text-align: center;
            margin-bottom: 30px;
        }

.header h1 {
            font-size: 2rem;
            color: #333;
            margin-bottom: 8px;
        }

.header p {
            color: #666;
            font-size: 1rem;
        }

.slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 10px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

.slider {
            display: flex;
            transition: transform 0.5s ease;
        }

.slide {
            min-width: 100%;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.shoe-image-container {
            width: 100%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
        }

.shoe-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

.shoe-details {
            width: 100%;
            max-width: 500px;
            text-align: center;
        }

.shoe-name {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #222;
        }

.shoe-price {
            font-size: 1.8rem;
            font-weight: 700;
            color: #e74c3c;
            margin-bottom: 15px;
        }

.original-price {
            font-size: 1.2rem;
            color: #999;
            text-decoration: line-through;
            margin-left: 8px;
        }

.shoe-description {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }

.shoe-features {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

.feature {
            background: #f8f9fa;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #555;
        }

.sizes {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

.size-btn {
            width: 45px;
            height: 45px;
            border: 2px solid #ddd;
            background: white;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

.size-btn:hover {
            border-color: #333;
        }

.size-btn.selected {
            background: #333;
            color: white;
            border-color: #333;
        }

.add-to-cart {
            background: #333;
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
            width: 100%;
            max-width: 300px;
        }

.add-to-cart:hover {
            background: #555;
        }

.slider-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 30px;
        }

.nav-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            border: 1px solid #ddd;
            color: #333;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.nav-btn:hover {
            background: #333;
            color: white;
        }

.dots-container {
            display: flex;
            gap: 10px;
        }

.dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ddd;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.dot.active {
            background: #333;
        }

.slide-indicator {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            font-size: 0.9rem;
            color: #666;
        }

.discount-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #e74c3c;
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 0.9rem;
            z-index: 2;
        }

/* Responsive Design - Fixed for all devices */
        @media (max-width: 768px) {
            body {
                padding: 15px;
            }
            
            .header h1 {
                font-size: 1.8rem;
            }
            
            .slide {
                padding: 20px;
            }
            
            .shoe-image-container {
                height: 250px;
            }
            
            .shoe-name {
                font-size: 1.3rem;
            }
            
            .shoe-price {
                font-size: 1.5rem;
            }
            
            .shoe-description {
                font-size: 0.95rem;
            }
            
            .nav-btn {
                width: 45px;
                height: 45px;
            }
        }

@media (max-width: 480px) {
            .header h1 {
                font-size: 1.5rem;
            }
            
            .slide {
                padding: 15px;
            }
            
            .shoe-image-container {
                height: 200px;
            }
            
            .shoe-name {
                font-size: 1.2rem;
            }
            
            .shoe-price {
                font-size: 1.3rem;
            }
            
            .shoe-description {
                font-size: 0.9rem;
            }
            
            .sizes {
                gap: 8px;
            }
            
            .size-btn {
                width: 40px;
                height: 40px;
            }
            
            .add-to-cart {
                padding: 12px 30px;
                font-size: 0.95rem;
            }
            
            .feature {
                padding: 6px 12px;
                font-size: 0.85rem;
            }
            
            .discount-badge {
                top: 15px;
                right: 15px;
                padding: 6px 12px;
                font-size: 0.8rem;
            }
        }

@media (max-width: 360px) {
            .shoe-image-container {
                height: 180px;
            }
            
            .sizes {
                gap: 6px;
            }
            
            .size-btn {
                width: 35px;
                height: 35px;
                font-size: 0.9rem;
            }
            
            .nav-btn {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }

JavaScript

Shoes Collection Slider Template Preview

Download Options