Swiperでスライドを簡単に実装する方法（スワイパー）【jQuery不要】

<!-- Swiper CDN css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
<!-- Swiper CDN js -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

Swiperの記述方法

<body></body>中に下記コードclass名を記述することでSwiperを使用することができます。

<div class=”swiper-slide”>と</div>中にimgタグで画像を入れて使います。

<!-- Swiper ↓ -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src=""></div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>
<!-- Swiper ↑ -->
<script>
//ここにSwiper-js記述
</script>
</body>

このコードは、Swiperスライダーを実装するためのHTMLとJavaScriptのコードです。

SwiperのJS記述例

一番シンプルなスライド実装の場合は下記コードで実装可能です。

var swiper = new Swiper(".mySwiper", {
  loop: true, //ループを一番目初めからに設定
  navigation: { //矢印有効化
    nextEl: ".swiper-button-next", //矢印右
    prevEl: ".swiper-button-prev", //矢印左
  },
});

このコードは、Swiperスライダーを初期化し、ループ再生と矢印ナビゲーションを有効にするための設定を行っています。

var swiper = new Swiper(“.mySwiper”, { … });	クラス名が mySwiper と設定された要素に対して、Swiperスライダーを初期化しています。swiper 変数には Swiper オブジェクトが格納されます。
loop: true,	スライダーをループ再生するように設定しています。最後のスライドまで表示された後、最初のスライドに自動的に戻ります。
navigation: { … },	ナビゲーション（矢印）を有効化するためのオプションを設定しています。 nextEl: “.swiper-button-next”,: 右矢印の要素のセレクタを指定しています。.swiper-button-next クラスが割り当てられた要素が右矢印として機能します。 prevEl: “.swiper-button-prev”,: 左矢印の要素のセレクタを指定しています。.swiper-button-prev クラスが割り当てられた要素が左矢印として機能します。

Swiperスライダー

このコードを使用することで、Swiperスライダーがループ再生され、矢印ナビゲーションが表示されるようになります。ユーザーは矢印をクリックすることで次のスライドや前のスライドに移動することができます。

Swiperのパラメータ

Swiperにはパラメータが用意されていて、<script></script>の中に記述してそれらを使ってスライダーをカスタマイズすることができます。

パラメータ

loop	false	true,を指定することでスライドをループさせることができます。
effect	‘slide’	スライドのエフェクトを指定で、”slide”, “fade”, “cube”, “coverflow”, “flip”, “creative”, “cards”の種類があります。
speed	300	スライドのスピードを指定します。デフォルトは300です。
initialSlide	0	開始するスライドのインデックスを指定0が1番目のスライドになります。
direction	‘horizontal’	スライドする方向を指定。水平方向：’horizontal’ 垂直方向：’vertical’を指定した場合は、heightを指定します。
autoHeight	false	trueを指定すると現在のスライドに合わせて高さを自動的に調整してくれます。
spaceBetween	0	スライド間の余白をpxで指定します。マージンを指定している場合、ナビゲーションが正常に機能しない場合があります。
slidesPerView	1	一度に表示するスライドの数を設定することが可能です。数値または ‘auto’ を指定します。
slidesPerGroup	1	同時にスライドさせるスライドの数を設定します。
slideToClickedSlide	false	trueと設定すると、スライドをクリックするとそのスライドへ移行スライドします。
centeredSlides	false	true を指定するとアクティブなスライドを中央に配置します。
loopedSlides	null	slidesPerView にautoを設定した場合、前後に複製するスライドの数を指定します。

パラメータ

自動再生：autoplay

自動的にスライドを開始し再生させる場合はautoplayを設定します。

delay	3000	スライド間の間隔をミリ秒で指定します。（例）delay: 5000,と記述すると、5秒後に次のスライドへ移行します。値を指定しない場合は自動再生は無効になります。.mySwiperに対してautoplayを設定してミリ秒の値を指定します。
stopOnLastSlide	false	trueを指定すると、最後のスライドに達したら停止します。ループでは無効です。
disableOnInteraction	true	ユーザが操作したら自動再生をストップさせる設定です。falseを指定すると操作があっても自動再生を継続します。
reverseDirection	false	trueを指定で、逆方向に自動再生します。

autoplayパラメータ