CSSとJavaScriptで画像が横スクロールするカルーセルスライダーを作る

CSSとJavaScriptを使用して、画像が横にスクロールするカルーセルスライダーを作成する方法を以下に示します。この例では、HTML、CSS、およびJavaScriptを使用して基本的なカルーセルスライダーを実装します。

HTMLのセットアップ

    <div class="carousel-container">
        <div class="carousel">
            <img src="image1.jpg" alt="画像1">
            <img src="image2.jpg" alt="画像2">
            <img src="image3.jpg" alt="画像3">
            <!-- 他の画像も追加 -->
        </div>
    </div>

CSSのスタイルを設定

/* styles.css */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.carousel-container {
    width: 100%;
    overflow: hidden;
}

.carousel {
    display: flex;
    animation: scroll 10s linear infinite;
}

.carousel img {
    width: 100%;
    height: auto;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

JavaScriptを追加

// script.js
const carousel = document.querySelector('.carousel');

carousel.addEventListener('animationiteration', () => {
    carousel.style.animation = 'none';
    setTimeout(() => {
        carousel.style.animation = 'scroll 10s linear infinite';
    }, 0);
});

画像が横スクロールするカルーセルスライダー完成

まとめ

このコードは、画像カルーセルスライダーを実装します。画像が横にスクロールし、最後の画像に到達すると最初の画像に戻ります。

アニメーションの時間や他のスタイルを調整して、デザインをカスタマイズできます。必要に応じて画像ファイル名とパスを実際のファイルに合わせて変更してください。