(Sample)

swiperというJavaScriptのライブラリを使用することで、無限に画像をスクロールさせることができます。

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css"
	integrity="sha512-pmAAV1X4Nh5jA9m+jcvwJXFQvCBi3T17aZ1KWkqXr7g/O2YMvO8rfaa5ETWDuBvRq6fbDjlw4jHL44jNTScaKg=="
	crossorigin="anonymous" referrerpolicy="no-referrer" />

SwiperのCSSファイルをCDNからインクルードします。

<body>
	<div class="swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="https://saycon.co.jp/html/img/1.png" alt="" />
			</div>
(中略)

<div class="swiper">: Swiperのコンテナを作成します。

<div class="swiper-wrapper">: スライドのラッパーです。全てのスライドがこの中に含まれるようにします。

<div class="swiper-slide">: 各スライドを表します。この中に画像が含まれるようにします。

CSS

<style>
	/* スライドの動き等速 */
	.swiper-wrapper {
		transition-timing-function: linear;
	}

	/* 画像のサイズ調整 */
	.swiper-slide img {
		height: auto;
		width: 100%;
	}
</style>

.swiper-wrapper { transition-timing-function: linear; }: スライドの移動が等速で行われるようにします。
.swiper-slide img { height: auto; width: 100%; }: 画像の高さを自動調整し、幅を100%に設定します。

JavaScript

		const swiper = new Swiper(".swiper", {
			loop: true, // ループ有効
			speed: 6000, // ループの時間
			allowTouchMove: false, // スワイプ無効
			autoplay: {
				delay: 0, // 途切れなくループ
			},
            // レスポンシブ設定
            breakpoints: {
                // ウィンドウ幅が640px以上の場合
                640: {
                    slidesPerView: 2,
                },
                // ウィンドウ幅が768px以上の場合
                768: {
                    slidesPerView: 3,
                },
                // ウィンドウ幅が1024px以上の場合
                1024: {
                    slidesPerView: 4,
                },
            }
        });
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"...>...</script>: SwiperのJavaScriptファイルをCDNからインクルードします。
  • const swiper = new Swiper(".swiper", {...});: Swiperを初期化します。
    • loop: true: スライドのループを有効にします。
    • speed: 6000: スライドが移動する速度を6000ms（6秒）に設定します。
    • allowTouchMove: false: タッチによるスワイプを無効にします。
    • autoplay: { delay: 0 }: 自動再生を有効にし、遅延を0msに設定します。
  • breakpoints: このオプションは、異なるウィンドウ幅に対して特定の設定を適用するために使用されます。レスポンシブデザインを実現するためのもので、指定されたウィンドウ幅に応じてスライダーの設定を変更します。
    • 640: ウィンドウ幅が640ピクセル以上の場合に適用される設定を指定します。
    • 768: ウィンドウ幅が768ピクセル以上の場合に適用される設定を指定します。
    • 1024: ウィンドウ幅が1024ピクセル以上の場合に適用される設定を指定します。
  • slidesPerView: このオプションは、一度に表示するスライドの枚数を指定します。
    • 640の場合: ウィンドウ幅が640ピクセル以上のとき、表示するスライドの枚数を2に設定します。
    • 768の場合: ウィンドウ幅が768ピクセル以上のとき、表示するスライドの枚数を3に設定します。
    • 1024の場合: ウィンドウ幅が1024ピクセル以上のとき、表示するスライドの枚数を4に設定します。

その他のプロパティ

  1. direction: スライドの方向を設定します。
    • horizontal (デフォルト) または vertical
    • 例: direction: 'vertical'
  2. initialSlide: 初期スライドのインデックスを設定します。
    • 例: initialSlide: 0
  3. speed: スライドが移動する速度を設定します（ミリ秒）。
    • 例: speed: 300
  4. spaceBetween: スライド間のスペースを設定します（ピクセル）。
    • 例: spaceBetween: 10

以上、Swiperの解説でした。

Webアプリケーション制作のための小ネタ集　目次に戻る