Карусель объектов на JavaScript

HTML

Разметка блока карусели.

    
<div class="scroller" data-direction="left" data-speed="middle">
    <div class="scroller__inner">
        <img src="https://i.pravatar.cc/150?img=1" alt="..." />
        <img src="https://i.pravatar.cc/150?img=2" alt="..." />
        <img src="https://i.pravatar.cc/150?img=3" alt="..." />
        <img src="https://i.pravatar.cc/150?img=4" alt="..." />
        <img src="https://i.pravatar.cc/150?img=5" alt="..." />
        <img src="https://i.pravatar.cc/150?img=6" alt="..." />
    </div>
</div>
    

Для управления каруселью используются data-атрибуты.

data-direction задает напрвление прокрутки. Допустимые значения: "left", "right"

data-speed задает скорость прокрутки. Допустимые значения: "fast", "middle", "slow"

Стили CSS

    
.scroller {
    max-width: 600px;
    margin: 0 auto
}

.scroller .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem
}

.scroller[data-animated=true] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, b 20%, white 80%, transparent)
}

.scroller[data-animated=true] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite
}

.scroller[data-animated=true] .scroller__inner img {
    height: 10rem;
    filter: grayscale(100%)
}

.scroller[data-animated=true] .scroller__inner img:hover {
    filter: none;
    cursor: pointer
}

.scroller[data-animated=true]:hover .scroller__inner {
    animation-play-state: paused
}

.scroller[data-direction=left] {
    --_animation-direction: forwards
}

.scroller[data-direction=right] {
    --_animation-direction: reverse
}

.scroller[data-speed=fast] {
    --_animation-duration: 20s
}

.scroller[data-speed=slow] {
    --_animation-duration: 120s
}

.scroller[data-speed=middle] {
    --_animation-duration: 40s
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - .5rem))
    }
}
    

Код JavaScript

    
const scrollers = document.querySelectorAll(".scroller");
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    addAnimation();  
}

function addAnimation() {
    scrollers.forEach((scroller) => {
        scroller.setAttribute("data-animated", true);

        const scrollerInner = scroller.querySelector(".scroller__inner");
        const scrollerContent = Array.from(scrollerInner.children);

        scrollerContent.forEach((item) => {
            const duplicatedItem = item.cloneNode(true);
            duplicatedItem.setAttribute("aria-hidden", true);
            scrollerInner.appendChild(duplicatedItem);
        });
    });
}
    

Результат