test

نوشته شده توسط

در

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فروشگاه محصولات چرمی</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* فونت سفارشی - Vazirmatn برای زبان فارسی مناسب است */
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
        body {
            font-family: 'Vazirmatn', sans-serif;
            background-color: #fcfcfc;
            color: #333;
        }
        /* کلاس‌های کمکی برای اسکرول افقی مخفی */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* افکت‌های هاور سفارشی */
        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* رنگ‌های سفارشی بر اساس تصویر */
        .bg-brand-dark { background-color: #2b2b2b; }
        .text-brand-dark { color: #2b2b2b; }
        .bg-brand-olive { background-color: #556b4f; }
        .bg-brand-light { background-color: #f3f3f3; }
        .bg-brand-cream { background-color: #f9f8f6; }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        olive: '#556b4f',
                        dark: '#2b2b2b',
                        cream: '#f9f8f6',
                        lightgray: '#e5e7eb'
                    }
                }
            }
        }
    </script>
</head>
<body class="antialiased">

    <header class="absolute top-0 w-full z-50 text-white py-4 px-6 md:px-12 flex justify-between items-center bg-gradient-to-b from-black/50 to-transparent">
        <div class="flex items-center gap-4">
            <button class="text-white hover:text-gray-300 transition"><i class="fas fa-bars text-xl"></i></button>
            <button class="text-white hover:text-gray-300 transition hidden md:block"><i class="fas fa-search text-xl"></i></button>
        </div>
        
        <div class="text-xl font-bold tracking-widest uppercase">
            Leather Goods
        </div>

        <div class="flex items-center gap-4">
            <a href="#" class="hidden md:inline-block hover:text-gray-300 transition text-sm">Account</a>
            <a href="#" class="hidden md:inline-block hover:text-gray-300 transition text-sm">Search</a>
            <button class="relative hover:text-gray-300 transition">
                <i class="fas fa-shopping-bag text-xl"></i>
                <span class="absolute -top-1 -right-2 bg-white text-black text-xs rounded-full h-4 w-4 flex items-center justify-center font-bold">0</span>
            </button>
        </div>
    </header>

    <section class="relative h-screen min-h-[500px] flex items-center justify-center text-center">
        <!-- تصویر پس‌زمینه (استفاده از placehold به عنوان نمونه) -->
        <div class="absolute inset-0 w-full h-full">
            <img src="https://placehold.co/1920x1080/8B5A2B/FFFFFF?text=Leather+Journals+Banner" alt="Leather Journals" class="w-full h-full object-cover" />
            <!-- یک لایه تیره برای خوانایی بهتر متن -->
            <div class="absolute inset-0 bg-black/20"></div>
        </div>

        <!-- محتوای روی بنر -->
        <div class="relative z-10 px-4 mt-20">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">A leather journal for all seasons.</h1>
            <a href="#" class="inline-block bg-white text-black font-medium py-3 px-8 rounded-sm hover:bg-gray-100 transition duration-300 uppercase tracking-wide text-sm">Shop Now</a>
        </div>
        
        <!-- نوار اطلاعات زیر هدر (روی تصویر) -->
        <div class="absolute bottom-0 w-full bg-black/40 text-white py-3 px-6 text-sm flex justify-between items-center backdrop-blur-sm">
            <span>Free shipping on orders over $50</span>
            <div class="hidden md:flex gap-4">
                <a href="#" class="hover:underline">Shop All</a>
                <a href="#" class="hover:underline">Journals</a>
                <a href="#" class="hover:underline">Accessories</a>
            </div>
        </div>
    </section>

    <section class="py-20 px-4 text-center max-w-3xl mx-auto bg-brand-cream">
        <h2 class="text-3xl font-bold mb-4 text-dark">Crafted with care. Made to last.</h2>
        <p class="text-gray-600 mb-8 leading-relaxed text-lg">
            We believe in creating products that stand the test of time. Our leather goods are designed to be your companions for life's journey, acquiring a unique patina with every adventure.
        </p>
        <a href="#" class="inline-block bg-olive text-white font-medium py-3 px-8 rounded-sm hover:bg-opacity-90 transition duration-300">Read Our Story</a>
    </section>

    <section class="py-16 bg-white overflow-hidden relative">
        <div class="px-6 md:px-12 mb-8">
            <h2 class="text-2xl font-bold border-b border-gray-200 pb-2 inline-block">Featured Products</h2>
        </div>
        
        <!-- کانتینر اسلایدر با قابلیت اسکرول -->
        <div class="relative px-6 md:px-12">
            <!-- دکمه‌های ناوبری اسلایدر (نمایشی) -->
            <button class="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 p-3 rounded-full shadow-md hover:bg-white transition hidden md:block">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 p-3 rounded-full shadow-md hover:bg-white transition hidden md:block">
                <i class="fas fa-chevron-right"></i>
            </button>

            <!-- آیتم‌های اسلایدر -->
            <div class="flex gap-4 overflow-x-auto no-scrollbar snap-x snap-mandatory">
                <!-- محصول 1 -->
                <div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
                    <div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
                        <img src="https://placehold.co/400x500/A0522D/FFF?text=Classic+Journal" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium text-gray-800">Classic Leather Journal</h3>
                        <p class="text-gray-500 mt-1">$45.00</p>
                    </div>
                </div>

                <!-- محصول 2 -->
                <div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
                    <div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
                        <img src="https://placehold.co/400x500/8FBC8F/FFF?text=Olive+Notebook" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium text-gray-800">Olive Green Notebook</h3>
                        <p class="text-gray-500 mt-1">$38.00</p>
                    </div>
                </div>

                <!-- محصول 3 -->
                <div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
                    <div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
                        <img src="https://placehold.co/400x500/CD853F/FFF?text=Pen+Holder" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                        <span class="absolute top-2 right-2 bg-white text-xs px-2 py-1 rounded-sm uppercase tracking-wide">New</span>
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium text-gray-800">Leather Pen Holder</h3>
                        <p class="text-gray-500 mt-1">$25.00</p>
                    </div>
                </div>

                <!-- محصول 4 -->
                <div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
                    <div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
                        <img src="https://placehold.co/400x500/4682B4/FFF?text=Blue+Planner" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium text-gray-800">2027 Daily Planner</h3>
                        <p class="text-gray-500 mt-1">$55.00</p>
                    </div>
                </div>
            </div>
            
            <!-- نوار پیشرفت اسلایدر -->
            <div class="w-full bg-gray-200 h-1 mt-8 max-w-xs mx-auto rounded-full overflow-hidden">
                <div class="bg-gray-800 h-full w-1/3 rounded-full"></div>
            </div>
        </div>
    </section>

    <section class="py-12 px-4 md:px-12 bg-white">
        <h2 class="text-xl font-bold mb-6">Shop by Category</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- باکس دسته بندی 1 -->
            <a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
                <img src="https://placehold.co/800x400/E0E0E0/808080?text=Journals" alt="Journals" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
                <div class="relative z-10 w-full">
                    <h3 class="text-2xl font-bold text-gray-800 mb-1">Journals</h3>
                    <p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
                </div>
            </a>
            
            <!-- باکس دسته بندی 2 -->
            <a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
                <img src="https://placehold.co/800x400/E0E0E0/808080?text=Accessories" alt="Accessories" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
                <div class="relative z-10 w-full">
                    <h3 class="text-2xl font-bold text-gray-800 mb-1">Accessories</h3>
                    <p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
                </div>
            </a>
            
             <!-- باکس دسته بندی 3 -->
             <a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
                <img src="https://placehold.co/800x400/E0E0E0/808080?text=Bags" alt="Bags" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
                <div class="relative z-10 w-full">
                    <h3 class="text-2xl font-bold text-gray-800 mb-1">Bags & Totes</h3>
                    <p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
                </div>
            </a>
            
            <!-- باکس دسته بندی 4 -->
            <a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
                <img src="https://placehold.co/800x400/E0E0E0/808080?text=Gifts" alt="Gifts" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
                <div class="relative z-10 w-full">
                    <h3 class="text-2xl font-bold text-gray-800 mb-1">Gift Sets</h3>
                    <p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
                </div>
            </a>
        </div>
    </section>

    <section class="h-[400px] md:h-[500px] bg-black text-white flex flex-col items-center justify-center text-center px-4 relative overflow-hidden group">
        <div class="absolute inset-0 bg-[url('https://placehold.co/1920x800/111/333?text=Process+Video')] bg-cover bg-center opacity-50 group-hover:opacity-60 transition duration-1000"></div>
        <div class="relative z-10">
            <i class="fas fa-play-circle text-5xl mb-4 cursor-pointer hover:text-gray-300 transition"></i>
            <h2 class="text-3xl font-bold tracking-widest uppercase">The Process</h2>
            <p class="mt-2 text-gray-400">See how it's made</p>
        </div>
    </section>

    <section class="py-16 px-4 md:px-12 bg-white">
        <div class="flex justify-between items-end mb-8">
            <h2 class="text-2xl font-bold">Journaling Tips & Ideas</h2>
            <a href="#" class="text-sm font-medium border-b border-black hover:text-gray-600 pb-1 hidden md:block">View All Posts</a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- مقاله 1 -->
            <article class="group cursor-pointer">
                <div class="aspect-square bg-gray-100 mb-4 overflow-hidden rounded-sm">
                    <img src="https://placehold.co/500x500/E0E0E0/808080" alt="Blog" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                </div>
                <h3 class="font-bold text-lg mb-2 group-hover:text-olive transition">5 Prompts to Start Your Day</h3>
                <p class="text-gray-600 text-sm mb-3 line-clamp-2">Overcome the blank page with these simple yet effective morning prompts designed to clear your mind.</p>
                <span class="text-xs text-gray-500 uppercase tracking-widest">Read More</span>
            </article>

            <!-- مقاله 2 -->
            <article class="group cursor-pointer">
                <div class="aspect-square bg-gray-100 mb-4 overflow-hidden rounded-sm">
                    <img src="https://placehold.co/500x500/E0E0E0/808080" alt="Blog" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                </div>
                <h3 class="font-bold text-lg mb-2 group-hover:text-olive transition">How to Care for Leather</h3>
                <p class="text-gray-600 text-sm mb-3 line-clamp-2">A comprehensive guide on cleaning, conditioning, and protecting your full-grain leather goods.</p>
                <span class="text-xs text-gray-500 uppercase tracking-widest">Read More</span>
            </article>

            <!-- مقاله 3 -->
            <article class="group cursor-pointer">
                <div class="aspect-square bg-gray-100 mb-4 overflow-hidden rounded-sm">
                    <img src="https://placehold.co/500x500/E0E0E0/808080" alt="Blog" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                </div>
                <h3 class="font-bold text-lg mb-2 group-hover:text-olive transition">Travel Journal Inspiration</h3>
                <p class="text-gray-600 text-sm mb-3 line-clamp-2">Document your adventures creatively. Layout ideas and essential tools for the perfect travel log.</p>
                <span class="text-xs text-gray-500 uppercase tracking-widest">Read More</span>
            </article>
        </div>
        <div class="mt-8 text-center md:hidden">
             <a href="#" class="inline-block border border-black px-6 py-2 rounded-sm hover:bg-black hover:text-white transition">View All Posts</a>
        </div>
    </section>

    <section class="py-8 px-4 md:px-12 bg-white">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- ردیف بالا - بزرگ -->
            <a href="#" class="group relative h-[250px] bg-gray-100 overflow-hidden rounded-sm flex items-center justify-center hover-lift col-span-1 md:col-span-2">
                <img src="https://placehold.co/1200x400/EAEAEA/808080?text=Personalization" alt="Personalization" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:scale-105 transition duration-700">
                <div class="relative z-10 text-center bg-white/90 p-6 rounded-sm min-w-[250px]">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Make it Yours</h3>
                    <p class="text-sm border-b border-black inline-block pb-1">Shop Monogrammed Items</p>
                </div>
            </a>
            
            <!-- ردیف پایین - دو ستون -->
            <a href="#" class="group relative h-[250px] bg-gray-100 overflow-hidden rounded-sm flex items-center justify-center hover-lift">
                 <img src="https://placehold.co/600x400/EAEAEA/808080?text=Corporate+Gifts" alt="Corporate Gifts" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:scale-105 transition duration-700">
                <div class="relative z-10 text-center">
                    <h3 class="text-xl font-bold text-gray-800 bg-white/80 px-4 py-2 rounded-sm">Corporate Gifting</h3>
                </div>
            </a>
            <a href="#" class="group relative h-[250px] bg-gray-100 overflow-hidden rounded-sm flex items-center justify-center hover-lift">
                 <img src="https://placehold.co/600x400/EAEAEA/808080?text=Our+Materials" alt="Materials" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:scale-105 transition duration-700">
                <div class="relative z-10 text-center">
                    <h3 class="text-xl font-bold text-gray-800 bg-white/80 px-4 py-2 rounded-sm">Our Materials</h3>
                </div>
            </a>
        </div>
    </section>

    <section class="py-20 px-4 bg-brand-light text-center">
        <div class="max-w-4xl mx-auto relative">
            <h2 class="text-sm font-bold tracking-widest uppercase text-gray-500 mb-12">What Our Customers Say</h2>
            
            <!-- آیکون‌های نقل قول -->
            <div class="text-4xl text-gray-300 mb-6 font-serif">"</div>
            
            <!-- متن نظر -->
            <p class="text-xl md:text-2xl font-medium text-gray-800 mb-8 leading-relaxed italic">
                "The quality of this journal is absolutely outstanding. The leather is soft yet durable, and the paper takes fountain pen ink perfectly without bleeding. It's become my daily companion."
            </p>
            
            <!-- نویسنده نظر -->
            <div class="flex items-center justify-center gap-4">
                <div class="w-12 h-12 bg-gray-300 rounded-full overflow-hidden">
                    <img src="https://placehold.co/100x100/999/FFF?text=S" alt="Sarah" class="w-full h-full object-cover">
                </div>
                <div class="text-left">
                    <p class="font-bold text-sm">Sarah Jenkins</p>
                    <div class="flex text-yellow-500 text-xs">
                        <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                    </div>
                </div>
            </div>

            <!-- دکمه‌های ناوبری نظرات -->
            <div class="flex justify-center gap-2 mt-8">
                <button class="w-3 h-3 rounded-full bg-gray-800"></button>
                <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400"></button>
                <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400"></button>
            </div>
        </div>
    </section>

    <section class="py-16 px-4 bg-gray-200 text-center">
        <div class="max-w-2xl mx-auto">
            <h2 class="text-2xl font-bold mb-4">Subscribe to our newsletter and get 10% off your first purchase.</h2>
            <p class="text-gray-600 mb-8 text-sm">Join our community to receive updates on new releases, special offers, and journaling tips.</p>
            
            <form class="flex flex-col md:flex-row gap-2 max-w-md mx-auto" onsubmit="event.preventDefault();">
                <input type="email" placeholder="Enter your email address" class="flex-1 px-4 py-3 rounded-sm border border-gray-300 focus:outline-none focus:border-gray-500" required>
                <button type="submit" class="bg-dark text-white px-8 py-3 rounded-sm hover:bg-gray-800 transition font-medium">Subscribe</button>
            </form>
        </div>
    </section>

    <footer class="bg-brand-dark text-white pt-16 pb-8 px-6 md:px-12">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12 border-b border-gray-700 pb-12">
            <!-- ستون 1: درباره -->
            <div class="col-span-1 md:col-span-1">
                <h3 class="text-lg font-bold tracking-widest uppercase mb-6">Leather Goods</h3>
                <p class="text-gray-400 text-sm leading-relaxed mb-6">
                    Handcrafted leather journals, bags, and accessories designed for the modern creator. Ethically sourced, thoughtfully made.
                </p>
                <div class="flex gap-4">
                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest text-xl"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-tiktok text-xl"></i></a>
                </div>
            </div>

            <!-- ستون 2: لینک‌های سریع -->
            <div>
                <h4 class="font-bold mb-6 text-sm uppercase tracking-wider">Shop</h4>
                <ul class="space-y-3 text-sm text-gray-400">
                    <li><a href="#" class="hover:text-white transition">All Products</a></li>
                    <li><a href="#" class="hover:text-white transition">Journals & Notebooks</a></li>
                    <li><a href="#" class="hover:text-white transition">Bags & Totes</a></li>
                    <li><a href="#" class="hover:text-white transition">Small Accessories</a></li>
                    <li><a href="#" class="hover:text-white transition">Gift Cards</a></li>
                </ul>
            </div>

            <!-- ستون 3: پشتیبانی -->
            <div>
                <h4 class="font-bold mb-6 text-sm uppercase tracking-wider">Support</h4>
                <ul class="space-y-3 text-sm text-gray-400">
                    <li><a href="#" class="hover:text-white transition">FAQ</a></li>
                    <li><a href="#" class="hover:text-white transition">Shipping & Returns</a></li>
                    <li><a href="#" class="hover:text-white transition">Leather Care Guide</a></li>
                    <li><a href="#" class="hover:text-white transition">Contact Us</a></li>
                    <li><a href="#" class="hover:text-white transition">Track Order</a></li>
                </ul>
            </div>

            <!-- ستون 4: اطلاعات تماس -->
            <div>
                <h4 class="font-bold mb-6 text-sm uppercase tracking-wider">Contact</h4>
                <ul class="space-y-3 text-sm text-gray-400">
                    <li class="flex items-start gap-3">
                        <i class="fas fa-map-marker-alt mt-1"></i>
                        <span>123 Maker Street, Craft District, Cityville 10001</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fas fa-envelope"></i>
                        <a href="mailto:hello@leathergoods.com" class="hover:text-white transition">hello@leathergoods.com</a>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fas fa-phone"></i>
                        <span>+1 (555) 123-4567</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- بخش پایینی فوتر -->
        <div class="flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-500">
            <div class="flex flex-wrap gap-4 justify-center">
                <span>&copy; 2026 Leather Goods Co.</span>
                <a href="#" class="hover:text-gray-300">Privacy Policy</a>
                <a href="#" class="hover:text-gray-300">Terms of Service</a>
            </div>
            
            <!-- آیکون‌های پرداخت -->
            <div class="flex gap-2 text-xl">
                <i class="fab fa-cc-visa"></i>
                <i class="fab fa-cc-mastercard"></i>
                <i class="fab fa-cc-amex"></i>
                <i class="fab fa-cc-paypal"></i>
                <i class="fab fa-cc-apple-pay"></i>
            </div>
        </div>
    </footer>

    <!-- اسکریپت‌های ساده برای تعاملات اولیه -->
    <script>
        // اسکریپت ساده برای اسکرول افقی با درگ کردن (اختیاری برای بهتر شدن UX)
        const slider = document.querySelector('.snap-x');
        let isDown = false;
        let startX;
        let scrollLeft;

        if(slider) {
            slider.addEventListener('mousedown', (e) => {
                isDown = true;
                slider.classList.add('active');
                startX = e.pageX - slider.offsetLeft;
                scrollLeft = slider.scrollLeft;
            });
            slider.addEventListener('mouseleave', () => {
                isDown = false;
                slider.classList.remove('active');
            });
            slider.addEventListener('mouseup', () => {
                isDown = false;
                slider.classList.remove('active');
            });
            slider.addEventListener('mousemove', (e) => {
                if (!isDown) return;
                e.preventDefault();
                const x = e.pageX - slider.offsetLeft;
                const walk = (x - startX) * 2; // سرعت اسکرول
                slider.scrollLeft = scrollLeft - walk;
            });
        }
    </script>
</body>
</html>

دیدگاه‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *