T Shirt 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> T-Shirt Collection</title>
    
</head>
<body>
    <div class="container">
        
        <div class="header">
            <h1> T-Shirt Collection Slider</h1>
            <p>Discover our exclusive range of premium quality t-shirts</p>
        </div>

<div class="slider-section">
            <div class="main-slider">
                <div class="slider-content">
                    
                    <div class="product-image-container">
                        <div class="product-image-wrapper">
                            <div class="product-image-bg"></div>
                            <img id="mainImage" src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=600&h=600&fit=crop" alt="T-Shirt" class="product-image">
                        </div>
                    </div>

<div class="product-details">
                        <span class="product-badge">FEATURED COLLECTION</span>
                        <h2 class="product-name" id="productName">Classic Blue</h2>
                        <p class="product-description" id="productDescription">
                            Premium 100% organic cotton t-shirt with superior comfort and durability. Perfect for everyday wear with a timeless design that never goes out of style.
                        </p>

<div class="stats">
                            <div class="stat-item">
                                <div class="stat-label">Rating</div>
                                <div class="stat-value">⭐ 4.8</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-label">Reviews</div>
                                <div class="stat-value" id="reviewCount">325</div>
                            </div>
                        </div>

<div class="thumbnail-section">
                            <label class="thumbnail-label">Choose Your Color</label>
                            <div class="thumbnail-container" id="thumbnailContainer">
                                
                            </div>
                        </div>

<div class="slider-controls">
                            <div class="nav-buttons">
                                <button class="nav-btn" onclick="previousSlide()" title="Previous">❮</button>
                                <button class="nav-btn" onclick="nextSlide()" title="Next">❯</button>
                            </div>
                            <div class="dots" id="dotsContainer">
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS

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

:root {
            --primary-blue: #2563eb;
            --dark-blue: #1e40af;
            --light-blue: #60a5fa;
            --lighter-blue: #dbeafe;
            --accent-blue: #0284c7;
            --text-dark: #1f2937;
            --text-light: #6b7280;
            --white: #ffffff;
            --bg-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--bg-gradient);
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }

/* Animated Background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            animation: float 20s ease-in-out infinite;
            z-index: 0;
        }

body::after {
            content: '';
            position: fixed;
            bottom: -100px;
            right: -100px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(2, 132, 199, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            animation: float 25s ease-in-out infinite reverse;
            z-index: 0;
        }

@keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(50px, 50px); }
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

/* Header Section */
        .header {
            text-align: center;
            margin-bottom: 60px;
            animation: fadeInDown 0.8s ease-out;
        }

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.header h1 {
            font-size: clamp(28px, 6vw, 52px);
            color: var(--dark-blue);
            margin-bottom: 12px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

.header p {
            font-size: 16px;
            color: var(--text-light);
            font-weight: 400;
            letter-spacing: 0.5px;
        }

/* Slider Section */
        .slider-section {
            perspective: 1000px;
            animation: fadeIn 0.8s ease-out 0.2s both;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

.main-slider {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(37, 99, 235, 0.1);
            border-radius: 25px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(37, 99, 235, 0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.main-slider::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(37, 99, 235, 0.3), transparent);
            z-index: 1;
        }

/* Slider Content */
        .slider-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            min-height: 500px;
            position: relative;
            z-index: 2;
        }

/* Product Image */
        .product-image-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.product-image-wrapper {
            position: relative;
            width: 100%;
            max-width: 400px;
            aspect-ratio: 1;
            animation: scaleIn 0.6s ease-out;
        }

@keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

.product-image-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--lighter-blue) 0%, var(--light-blue) 100%);
            border-radius: 20px;
            transform: rotate(5deg);
            opacity: 0.6;
            z-index: 0;
        }

.product-image {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(37, 99, 235, 0.2);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

.product-image-wrapper:hover .product-image {
            transform: scale(1.05) rotate(-2deg);
            box-shadow: 0 30px 80px rgba(37, 99, 235, 0.3);
        }

/* Product Details */
        .product-details {
            animation: slideInRight 0.6s ease-out;
        }

@keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

.product-badge {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
            color: var(--white);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
            animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
        }

@keyframes popIn {
            from {
                opacity: 0;
                transform: scale(0.5);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

.product-name {
            font-size: clamp(28px, 5vw, 42px);
            font-weight: 700;
            color: var(--dark-blue);
            margin-bottom: 16px;
            line-height: 1.2;
            animation: fadeInUp 0.6s ease-out 0.15s both;
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.product-description {
            font-size: 16px;
            color: var(--text-light);
            line-height: 1.8;
            margin-bottom: 24px;
            animation: fadeInUp 0.6s ease-out 0.25s both;
        }

.product-price {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 32px;
            animation: fadeInUp 0.6s ease-out 0.35s both;
        }

.price-current {
            font-size: 36px;
            font-weight: 700;
            color: var(--primary-blue);
        }

.price-original {
            font-size: 18px;
            color: var(--text-light);
            text-decoration: line-through;
            opacity: 0.7;
        }

/* Stats */
        .stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 32px;
            animation: fadeInUp 0.6s ease-out 0.4s both;
        }

.stat-item {
            background: rgba(37, 99, 235, 0.05);
            padding: 16px;
            border-radius: 12px;
            border: 1px solid rgba(37, 99, 235, 0.1);
            transition: all 0.3s ease;
        }

.stat-item:hover {
            background: rgba(37, 99, 235, 0.1);
            border-color: rgba(37, 99, 235, 0.2);
            transform: translateY(-4px);
        }

.stat-label {
            font-size: 12px;
            color: var(--text-light);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }

.stat-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--dark-blue);
        }

/* Add to Cart Button */
        .add-to-cart-btn {
            width: 100%;
            padding: 16px 24px;
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
            color: var(--white);
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
            animation: fadeInUp 0.6s ease-out 0.45s both;
        }

.add-to-cart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(37, 99, 235, 0.3);
        }

.add-to-cart-btn:active {
            transform: translateY(-1px);
        }

/* Thumbnail Slider */
        .thumbnail-section {
            margin-top: 40px;
            animation: fadeInUp 0.6s ease-out 0.5s both;
        }

.thumbnail-label {
            font-size: 12px;
            color: var(--text-light);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
            display: block;
        }

.thumbnail-container {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 8px;
            scroll-behavior: smooth;
        }

.thumbnail-container::-webkit-scrollbar {
            height: 4px;
        }

.thumbnail-container::-webkit-scrollbar-track {
            background: rgba(37, 99, 235, 0.05);
            border-radius: 10px;
        }

.thumbnail-container::-webkit-scrollbar-thumb {
            background: var(--primary-blue);
            border-radius: 10px;
        }

.thumbnail {
            min-width: 80px;
            height: 80px;
            background: rgba(37, 99, 235, 0.05);
            border: 2px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s ease;
            opacity: 0.6;
        }

.thumbnail:hover,
        .thumbnail.active {
            opacity: 1;
            border-color: var(--primary-blue);
        }

.thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* Navigation Controls */
        .slider-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid rgba(37, 99, 235, 0.1);
            animation: fadeInUp 0.6s ease-out 0.55s both;
        }

.nav-buttons {
            display: flex;
            gap: 12px;
        }

.nav-btn {
            width: 48px;
            height: 48px;
            border: 2px solid var(--lighter-blue);
            background: var(--white);
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--primary-blue);
            transition: all 0.3s ease;
            font-weight: bold;
        }

.nav-btn:hover {
            background: var(--primary-blue);
            color: var(--white);
            border-color: var(--primary-blue);
            transform: translateY(-3px);
        }

.nav-btn:active {
            transform: translateY(-1px);
        }

/* Dots Indicator */
        .dots {
            display: flex;
            gap: 8px;
        }

.dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(37, 99, 235, 0.2);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.dot.active {
            background: var(--primary-blue);
            width: 28px;
            border-radius: 5px;
        }

.dot:hover {
            background: var(--light-blue);
        }

/* Responsive Design */
        @media (max-width: 1024px) {
            .slider-content {
                grid-template-columns: 1fr;
                gap: 30px;
                min-height: auto;
            }

.product-image-wrapper {
                max-width: 350px;
                margin: 0 auto;
            }

.main-slider {
                padding: 30px;
            }
        }

@media (max-width: 768px) {
            .main-slider {
                padding: 24px;
            }

.slider-controls {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }

.header h1 {
                font-size: 32px;
            }

.product-name {
                font-size: 28px;
            }

.product-image-wrapper {
                max-width: 280px;
            }

.price-current {
                font-size: 28px;
            }

.add-to-cart-btn {
                width: 100%;
            }
        }

@media (max-width: 480px) {
            body {
                padding: 15px;
            }

.container {
                margin: 0 auto;
            }

.header {
                margin-bottom: 40px;
            }

.header h1 {
                font-size: 24px;
            }

.header p {
                font-size: 14px;
            }

.main-slider {
                padding: 20px;
            }

.slider-content {
                gap: 20px;
            }

.product-image-wrapper {
                max-width: 100%;
                max-height: 300px;
            }

.product-name {
                font-size: 22px;
            }

.product-description {
                font-size: 14px;
            }

.price-current {
                font-size: 24px;
            }

.stats {
                grid-template-columns: 1fr;
            }

.nav-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

.thumbnail {
                min-width: 70px;
                height: 70px;
            }
        }

JavaScript

// Product Data
        const products = [
            {
                id: 1,
                name: 'Classic Blue',
                description: 'Premium 100% organic cotton t-shirt with superior comfort and durability. Perfect for everyday wear with a timeless design that never goes out of style.',
                price: '$29.99',
                image: 'https://images.unsplash.com/photo-1716951910901-3f595611cf3d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fHRzaGlydHxlbnwwfHwwfHx8MA%3D%3D',
                reviews: 325
            },
            {
                id: 2,
                name: 'Ocean Deep',
                description: 'Experience ultimate softness with our ultra-premium fabric blend. This sophisticated dark blue tone complements any outfit and maintains color wash after wash.',
                price: '$34.99',
                image: 'https://images.unsplash.com/photo-1714070700737-24acfe6b957c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHRzaGlydHxlbnwwfHwwfHx8MA%3D%3D',
                reviews: 412
            },
            {
                id: 3,
                name: 'Sky Light',
                description: 'Lightweight and breathable material ideal for warm weather. The pale blue hue adds elegance to your wardrobe while maintaining a modern aesthetic.',
                price: '$32.99',
                image: 'https://plus.unsplash.com/premium_photo-1718913936342-eaafff98834b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8dHNoaXJ0fGVufDB8fDB8fHww',
                reviews: 289
            },
            {
                id: 4,
                name: 'Navy Elite',
                description: 'Durability meets style in this premium navy-toned masterpiece. Reinforced seams and premium stitching ensure long-lasting wear and comfort.',
                price: '$35.99',
                image: 'https://images.unsplash.com/photo-1633966887768-64f9a867bdba?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8dHNoaXJ0fGVufDB8fDB8fHww',
                reviews: 478
            },
            {
                id: 5,
                name: 'Azure Dream',
                description: 'Elegant and versatile azure shade that pairs with everything. Breathable fabric keeps you cool while maintaining a polished, sophisticated look.',
                price: '$28.99',
                image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=600&fit=crop',
                reviews: 356
            },
            {
                id: 6,
                name: 'Sapphire Premium',
                description: 'Our most premium collection featuring rich sapphire tones. Exceptional quality fabric with a luxurious feel that stands out from the crowd.',
                price: '$36.99',
                image: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8dHNoaXJ0fGVufDB8fDB8fHww',
                reviews: 523
            }
        ];

let currentIndex = 0;

// Initialize
        function init() {
            createThumbnails();
            createDots();
            updateSlider();
        }

function updateSlider() {
            const product = products[currentIndex];
            
            // Update content with animation
            const mainImage = document.getElementById('mainImage');
            const nameEl = document.getElementById('productName');
            const descEl = document.getElementById('productDescription');
            const priceEl = document.getElementById('productPrice');
            const reviewEl = document.getElementById('reviewCount');

mainImage.style.opacity = '0';
            setTimeout(() => {
                mainImage.src = product.image;
                mainImage.style.opacity = '1';
            }, 300);

// Animate text
            nameEl.style.animation = 'none';
            descEl.style.animation = 'none';
            priceEl.style.animation = 'none';
            reviewEl.style.animation = 'none';

setTimeout(() => {
                nameEl.textContent = product.name;
                descEl.textContent = product.description;
                priceEl.textContent = product.price;
                reviewEl.textContent = product.reviews;

nameEl.style.animation = 'fadeInUp 0.6s ease-out';
                descEl.style.animation = 'fadeInUp 0.6s ease-out 0.1s both';
                priceEl.style.animation = 'fadeInUp 0.6s ease-out 0.2s both';
                reviewEl.style.animation = 'fadeInUp 0.6s ease-out 0.2s both';
            }, 300);

// Update active states
            updateThumbnails();
            updateDots();
        }

function updateThumbnails() {
            document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
                thumb.classList.toggle('active', index === currentIndex);
            });
        }

function updateDots() {
            document.querySelectorAll('.dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === currentIndex);
            });
        }

function nextSlide() {
            currentIndex = (currentIndex + 1) % products.length;
            updateSlider();
        }

function previousSlide() {
            currentIndex = (currentIndex - 1 + products.length) % products.length;
            updateSlider();
        }

function goToSlide(index) {
            currentIndex = index;
            updateSlider();
        }

function addToCart() {
            alert(`Added "${products[currentIndex].name}" to cart! ?`);
        }

// Auto-rotate every 5 seconds
        setInterval(nextSlide, 5000);

// Initialize on load
        window.addEventListener('load', init);

T Shirt Collection Slider Preview

Download Options