Contents
1月ももう中旬を過ぎました
こんにちは！
こないだ年越したばかりなのに、もう半月が過ぎてしまいました。早いですねぇ〜〜。
普段実務ではプラグインなしでやろうぜ? という雰囲気を感じるので極力使わないのですが、最近スライダーの実装でピュア JavaScript ではどーもうまくいかないことがあり(自分が弱々なだけなんですが)、プラグインを使う機会がありました。
恥ずかしながら初めてプラグインを使用したのですが、あまりの便利さにひっくり返りそうになったので(大げさ)、どんだけ簡単なの? というのとプラグインの特徴・問題点などなど、
使う中でいろいろと感じることがあったので、今回は、
と題して、Swiperでスライダーを実装していきたいと思います。
前回ブログはこちらから↓
プラグインSwiperの特徴
いろいろ調べた結果、ざっくりと下記のような特徴があることがわかりました。
-ライブラリ非依存(ピュア JavaScript で記載が可能)
-レスポンシブ対応可能
-6系はIE非対応、4系は対応可、5系はwebpackの使用を変更すれば動くという情報有
個人的にライブラリ非依存・IE対応というのが決め手でした。
ライブラリというのは、ここでは jQuery のことです。スライダー実装に使用できるプラグインは結構な数存在するのですが、大体が jQuery メインで実装してあるので jQuery をまず導入する必要があるんですね。
あとは Swiper は他のプラグインと比較してもブログなどの参考記事が圧倒的に多く、困った時もなんとかなりそう、という印象がありました。
プラグインSwiperを使ってスライダーを実装する方法
スライドが5枚あり、左右両端にボタン、画像中央下部にカレントスライドを示す小さいポチボタンがある、ごく一般的なスライダーを実装してみます。
CDNの読み込み
headタグ内にCDNを読み込みます。
最新は6系なのですが、IEでも動く4系にしました。
<!-- CDNの読み込み -->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
</head>↓こちらで好きな CDN の version を探すことができるので便利。
HTML
予め使用するクラスが決まっているので、下記のようにHTMLを組みます。CSSはCDNを読み込んでいるので、勝手にいい感じにしてくれます。
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 各スライド画像 -->
<div class="swiper-slide"><img src="/img/slide1.jpg" alt=""></div>
<div class="swiper-slide"><img src="/img/slide2.jpg" alt=""></div>
<div class="swiper-slide"><img src="/img/slide3.jpg" alt=""></div>
<div class="swiper-slide"><img src="/img/slide4.jpg" alt=""></div>
<div class="swiper-slide"><img src="/img/slide5.jpg" alt=""></div>
</div>
<!-- 左右の矢印ボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 画像下のポチボタン -->
<div class="swiper-pagination"></div>
</div>JS
各種オプションを設定します。
var mySwiper = new Swiper('.swiper-container', {
// 自動スライド設定
autoplay: {
delay: 3000, // 3秒でスライド
stopOnLastSlide: false,
disableOnInteraction: false,
reverseDirection: false
},
// 無限ループ設定
loop: true,
// スライドスピード(画像が切り替わる際のスピード))
speed: 400,
// 左右の矢印ボタン
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
// 画像下のポチボタン
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
});上記は最低限な感じですが、公式を見るとめちゃくちゃオプションがあるので、正直実装できないスライダーないんじゃないの? って思ったくらいです。
えー、以上です！！(超簡単！！！！？？？)
いやー、めちゃくちゃにシンプルにできちゃいましたね。びっくり。
ちなみに、Chrome(Win/Mac)、Edge、IEで動くことも確認しました。
IE対応はめちゃくちゃ助かるぅ……
プラグインSwiperの問題点
問題なんてほぼないんですけど、一点だけ感じたことを。
z-index がえげつない
プラグインの仕様でデフォルトのクラスにえげつないくらい z-index が指定されています。
スライダーだけ実装する場合は問題ないんですが、(まぁそんなことはほぼないと思いますが)
他のコンテンツがいろいろある場合に、このもともと指定されている z-index によって下位コンテンツが隠れるなどの問題が発生しました。(しかもIEだけ！)
そういう場合は適宜元のCSSを弄って z-index を削除しましょう。(削除しても動作は全然問題なかった)
CDNで読み込んでると調整が面倒なので、自分は CDN の中身を全部.scss ファイルにコピペしてカスタマイズできるようにしました。
まとめ
プラグインを使用するまではピュア JavaScript だけでどうにかしようとしてめちゃくちゃ時間を溶かしてしまったのですが、(どれくらい溶かしたか恥ずかしくて言えない)
プラグインを使用したら小一時間でスライダーが動いてしまったので、この威力には驚かされました。
プラグインなしで自分で実装できれば一番いいかもしれないけど、世の中こんなに便利なものがあるなら使用した方がいいなーって思いました…
実際、大手メーカーのサイトでも使われているのを発見しましたしね。
よほどプラグインを使用してはいけない理由がない限りは、工数の観点からしても利用してみるのはいいんではないかと思いました。
以上、ここまでお読みいただきありがとうございました！
