Right to Left Auto Slider

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Right to Left Auto Slider</title>
    <style>
        .slider-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            /* background: #033f5f; */
            padding: 20px 0;
        }

        .slider-track {
            display: flex;
            gap: 20px;
            animation: scroll-rtl 35s linear infinite;
        }

        .slide {
            flex: 0 0 auto;
            width: 280px;
            /* Adjust width */
            max-width: 100%;
        }

        .slide img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            display: block;
        }

        /* Animation for right-to-left */
        @keyframes scroll-rtl {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .slide {
                width: 200px;
            }
        }

        @media (max-width: 480px) {
            .slide {
                width: 160px;
            }
        }
    </style>
</head>

<body>
    <div class="slider-container">
        <div class="slider-track">
            <!-- Repeat images twice for smooth loop -->
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_19_-_Example_3ea09667-8736-477f-bca9-7b8e0714c89e.webp?v=1755856847"
                    alt="Slide 1"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_3_-_Example_fb9fdc25-388f-44b9-9ce4-b420bad4fae2.webp?v=1755856847"
                    alt="Slide 2"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_95_-_Example_6909e116-6487-4372-a28b-d13067d09e52.webp?v=1755856847"
                    alt="Slide 3"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_16_-_Example_d95415ab-a5a2-49af-b18e-425431552f0c.webp?v=1755856847"
                    alt="Slide 4"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_6_-_Example__1_3e8b0140-375c-4da0-8bca-32ca8ddaa783.webp?v=1755856847"
                    alt="Slide 5"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_57_-_Example_987112fb-ae91-445d-9262-efbdffa33dba.webp?v=1755856846"
                    alt="Slide 6"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_51_-_Example_ea432ce6-3a57-414c-bbe4-bbe4be2fc623.webp?v=1755856847"
                    alt="Slide 7"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_93_-_Example_5dc69c8f-553d-4e97-83ec-5091abc1a5f7.webp?v=1755856847"
                    alt="Slide 8"></div>

            <!-- Duplicate for infinite scroll effect -->
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_19_-_Example_3ea09667-8736-477f-bca9-7b8e0714c89e.webp?v=1755856847"
                    alt="Slide 1"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_3_-_Example_fb9fdc25-388f-44b9-9ce4-b420bad4fae2.webp?v=1755856847"
                    alt="Slide 2"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_95_-_Example_6909e116-6487-4372-a28b-d13067d09e52.webp?v=1755856847"
                    alt="Slide 3"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_16_-_Example_d95415ab-a5a2-49af-b18e-425431552f0c.webp?v=1755856847"
                    alt="Slide 4"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_6_-_Example__1_3e8b0140-375c-4da0-8bca-32ca8ddaa783.webp?v=1755856847"
                    alt="Slide 5"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_57_-_Example_987112fb-ae91-445d-9262-efbdffa33dba.webp?v=1755856846"
                    alt="Slide 6"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_51_-_Example_ea432ce6-3a57-414c-bbe4-bbe4be2fc623.webp?v=1755856847"
                    alt="Slide 7"></div>
            <div class="slide"><img
                    src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/Concept_93_-_Example_5dc69c8f-553d-4e97-83ec-5091abc1a5f7.webp?v=1755856847"
                    alt="Slide 8"></div>
        </div>
    </div>
</body>

</html>