<Ko-Coding/>

注目キーワード
  1. モーダルスライダー
  2. メガメニュー
  3. 16進数

swiperスライダーの発動条件について解説！よくある記事一覧レイアウトをswiperスライダーに変更！

コラム
目次

はじめに

今回の記事ではswiperの発動条件について紹介します。

swiper適用前のレイアウト

サンプルとして以下のようなレイアウトを考えます。このレイアウトにswiperを適用したいと思います。

PR

swiper適用前のレイアウトのHTML

<div class="article__list">
    <article class="article__item">
        <!-- 省略 -->
    </article>
    <article class="article__item">
        <!-- 省略 -->
    </article>
    <article class="article__item">
        <!-- 省略 -->
    </article>
    <article class="article__item">
        <!-- 省略 -->
    </article>
    <article class="article__item">
        <!-- 省略 -->
    </article>
    <article class="article__item">
        <!-- 省略 -->
    </article>
</div>

swiper適用前のレイアウトのHTMLの説明

記事（.article__item）が6つあってそれを包むwrapper要素（.article__list）があります。

swiperの発動条件

swiperのライブラリを読み込む

下記CDNを<head>タグ内や</body>閉じタグの上などの適切な場所に配置してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

上記はこの記事を書いている現時点（2023年11月）での最新のCDNですが、いずれ最新ではなくなるため、公式の方も一応チェックしてください。

Swiper
Getting Started With Swiper

Swiper is the most modern free mobile touch slider with hard…

HTMLにswiperのクラスを追加する

先ほど紹介した「swiper適用前のレイアウトのHTML」に対して「swiperのクラスを追加」していきます。追加すると以下のようなHTML構造になります。

<div class="swiper">
	<div class="article__list swiper-wrapper">
		<article class="article__item swiper-slide">
			<!-- 省略 -->
		</article>
		<article class="article__item swiper-slide">
			<!-- 省略 -->
		</article>
		<article class="article__item swiper-slide">
			<!-- 省略 -->
		</article>
		<article class="article__item swiper-slide">
			<!-- 省略 -->
		</article>
		<article class="article__item swiper-slide">
			<!-- 省略 -->
		</article>
		<article class="article__item swiper-slide">
			<!-- 省略 -->
		</article>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-next"></div>
</div>

スライドの部分のクラスに「swiper-slide」を追加

スライドの部分のクラスに「swiper-slide」を追加します。今回だと記事（.article__item）の部分がスライドになるのでそこに追加しました。

スライドのwrapper要素に「swiper-wrapper」を追加

スライドのwrapper要素に「swiper-wrapper」を追加します。今回だと（.article__list）の部分がwrapper要素になるのでそこに追加します。

swiper-wrapperの親要素を追加

swiper-wrapperの親要素を追加します。親要素のクラス名は任意ですが、自作JSでそのクラス名を使用します。今回はswiper-wrapperの親要素として「swiper」を追加しました。なので自作JSで「swiper」を使用します。

必要に応じて矢印とページネーションのHTMLを追加する

必要に応じて矢印とページネーションのHTMLを追加します。追加した場合は自作JSにも「pagination」と「navigation」のソースコードを追加しましょう。

自作JSにswiper用のソースコードを追加する

例として、PC2枚、スマホ1枚、矢印、ページネーションありのswiperを実装するソースコードを示します。

自作JSはswiper-bundle.min.jsよりも下に追加してください。

const swiper = new Swiper(".swiper", {
    autoplay: {
        delay: 3000,
    },
    centeredSlides: true,
    breakpoints: {
        768: {
            centeredSlides: false,
            slidesPerView: 2,
            spaceBetween: 40,
        }
    },
    loop: true,
    pagination: {
		el: ".swiper-pagination",
		clickable: true,
	  },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 1,
});

1行目のnew Swiperのカッコ内の「.swiper」について

swiper-wrapperの親要素として指定した「swiper」をここに記述することでswiperが発動します。

swiper適用後のレイアウト

まとめ

swiperのライブラリを読み込む
HTMLにswiperのクラスを追加する。「.swiper（今回の記事だと）」「.swiper-wrapper」「.swiper-slide」
自作JSを「swiper-bundle.min.js」より下に追加する。new Swiperのカッコ内に「.swiper-wrapper」の親要素にあたるクラス名「.swiper（今回の記事だと）」を指定する。

cssは適宜調整をお願いします。

>お問い合わせはこちら

お問い合わせはこちら

お問い合わせ