CSSとJavascriptで画像のループスライダーを実装する

CSSとJavascriptでループスライダーを実装します。

アニメーションはCSS。動作の基本となる部分はJavascriptで対応。

• 画像の枚数が変わってもOK
• 速度をHTML属性で変更可

コード

HTML

<div class="is-left-to-right" data-js-id="loopslider" data-loopslider-duration="60">
    <div class="track">
        <div class="slide"><img src="img_01.png"></div>
        <div class="slide"><img src="img_02.png"></div>
        <div class="slide"><img src="img_03.png"></div>
        <div class="slide"><img src="img_04.png"></div>
        <div class="slide"><img src="img_01.png"></div>
        <div class="slide"><img src="img_02.png"></div>
        <div class="slide"><img src="img_03.png"></div>
        <div class="slide"><img src="img_04.png"></div>
    </div>
</div>

CSS

[data-js-id='loopslider'] .track {
    --duration: 20s;
}
[data-js-id='loopslider'].is-left-to-right .track {
    animation: scroll-left var(--duration) linear infinite;
}

[data-js-id='loopslider'].is-right-to-left .track {
    animation: scroll-right var(--duration) linear infinite;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

Javascript

    // JS loopslider
    document.querySelectorAll('[data-js-id="loopslider"]').forEach((loop) => {
        const track = loop.querySelector('.track');
        track.innerHTML += track.innerHTML;

        const dur = loop.getAttribute('data-loopslider-duration');
        if (dur) track.style.setProperty('--duration', dur + 's');
    });

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選