スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。
外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能。
▪Swiperの参考例⇩
## Swiper公式サイト
▪Swiperの公式サイト・・・
▪SwiperのCDN・・・
▪Swiperのデモ・・・
## Swiperの実装方法
### SwiperファイルCDNで読み込む
<head></head>中にcssのCDNを記述。
</body>の直前にjsのCDNを記述。
<!-- Swiper CDN css -->
<link rel="stylesheet" href="
<!-- Swiper CDN js -->
<script src="
### 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>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
<!-- Swiper ↑ -->
<script>
//ここにSwiper-js記述
</script>
</body>
### SwiperのJS記述例
一番シンプルなスライド実装の場合は下記コードで実装可能です。
var swiper = new Swiper(".mySwiper", {
loop: true, //ループを一番目初めからに設定
navigation: { //矢印有効化
nextEl: ".swiper-button-next", //矢印右
prevEl: ".swiper-button-prev", //矢印左
},
});
## 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
|trueを指定すると現在のスライドに合わせて高さを自動的に調整してくれます。
|spaceBetween
|スライド間の余白をpxで指定します。マージンを指定している場合、ナビゲーションが正常に機能しない場合があります。
|slidesPerView
|1
|一度に表示するスライドの数を設定することが可能です。数値または ‘auto’ を指定します。
|slidesPerGroup
|同時にスライドさせるスライドの数を設定します。
|slideToClickedSlide
|trueと設定すると、スライドをクリックするとそのスライドへ移行スライドします。
|centeredSlides
|true を指定するとアクティブなスライドを中央に配置します。
|loopedSlides
|null
|slidesPerView にautoを設定した場合、前後に複製するスライドの数を指定します。
### 自動再生：autoplay
自動的にスライドを開始し再生させる場合はautoplayを設定します。
|delay
|3000
|スライド間の間隔をミリ秒で指定します。（例）delay: 5000,と記述すると、5秒後に次のスライドへ移行します。値を指定しない場合は自動再生は無効になります。.mySwiperに対してautoplayを設定してミリ秒の値を指定します。
|stopOnLastSlide
|trueを指定すると、最後のスライドに達したら停止します。ループでは無効です。
|disableOnInteraction
|true
|ユーザが操作したら自動再生をストップさせる設定です。falseを指定すると操作があっても自動再生を継続します。
|reverseDirection
|trueを指定で、逆方向に自動再生します。
## Swiper応用編
ズームしながらフワッと画像を切り替えるzoomUpを追加したSwiperです。
delay: 5000,で5秒後に次のスライドへ移動し、speed: 3000,で3秒かけて画像が切り替わります。
### jQueryを使用する場合のフワッとスライダー
jQueryベースのプラグイン「slick」もあるので状況に合わせてスライダーは使い分けるのもいいかもしれませんね。