Swiper.jsの使い方、動かないときの対処法(v6.3.2,v5.4.5 + IE11)
この記事は、最初の投稿から4年以上が経過しています。
最終更新から1517日が経過しています。
「Swiperの使い方を知りたい」
「Swiperが動かないけどどうすればいいの?」
こんな悩みにお答えします。
Webサイトにスライダーを設置するには、Swiperがおすすめです。
最新のバージョン6系はIE11で動作しないようなので、IE対応をしなくてよい場合を除いて、今のところはバージョン5系を使うほうがよそうです。
2015年からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきましたが、コーポレートサイトではほとんどのWebサイトで設置するほどスライダーはよく使います。
この記事では以下のことがわかります。
- Swiperの使い方
- Swiperが動かないときの対処法
記事を読み終えると、WebサイトにSwiper.jsを使ったスライダーを設置することができます。
- 目次
Swiper とは
Swiperは、Webサイトにスライダー、カルーセルなどを設置できるJavaScriptプラグインです。
スライダープラグインは、Swiperの他にSlick、bx-sliderなどが有名です。
他のプラグインとは違うSwiperの特徴として、jQuery不要で使えるということがあります。
jQueryが不要なので、jQueryのバージョンに左右されることなく、動きも滑らかに感じられます。
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
- POINT
- SwiperはjQuery不要でスライダーを設置することができる!
Swiperの使い方
プラグインの読み込み
まず、ファイルをダウンロードするか、CDNから読み込みます。
バージョン6がリリースされたばかりです。
ちょっと使ってみた感じでは、基本的な使い方はバージョン5と違いは無さそうです。
できればバージョン6、最新バージョンを使うことに不安があればバージョン5を使ってください。
- バージョン6
-
// CSS <link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css"> // JavaScript <script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
- バージョン5
-
// CSS <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css"> // JavaScript <script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
HTMLを記述する
Swiperを使用するとき、HTMLの基本パターンは以下のようになります。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div>
以下、4つの要素は不要であれば書かなくても大丈夫です。
- swiper-pagination
- swiper-button-prev
- swiper-button-next
- swiper-scrollbar
JavaScriptを記述する
Swiperを使用するとき、HTMLの基本パターンは以下のようになります。
var Swiper = new Swiper('.swiper-container', { loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', }, })
パラメータ | 型 | 初期値 | 説明 |
---|---|---|---|
speed | number | 300 | スライド間の遷移時間(ミリ秒) |
effect | string | 'slide' | 遷移効果。 "slide", "fade", "cube", "coverflow", "flip"のいずれか |
spaceBetween | number | 0 | スライド間の距離(ピクセル単位)。 |
slidesPerView | number or 'auto' | 1 | ビューあたりのスライドの数(スライドは、スライダーのコンテナーで同時に表示されます)。 |
centeredSlides | boolean | false | trueの場合、アクティブなスライドは中央に配置され、常に左側に配置されるわけではありません。 |
autoplay | object/boolean | trueでデフォルト設定。オブジェクトで詳細設定ができます。 | |
breakpoints | object | さまざまなレスポンシブブレークポイント(画面サイズ)にさまざまなパラメーターを設定できます。 | |
loop | boolean | false | 連続ループモードを有効にするには、trueに設定します |
オプションはもっとたくさんあるので、公式を参照してください。
Swiperが動かないときの対処法
JavaScript、CSSファイルが読み込めているか確認する
基本中の基本ですが、プラグインファイルの読み込みを再確認してみてください。
個人的には、JavaScriptは読み込んでいていろいろ設定したあとに動かないと思ってみると、CSSファイルを読み込んでなかったということがときどきあります。
ファイルをダウンロードして使う場合は、パスなどの記述ミスがないか確認してみてください。
// JavaScript <script src="./js/swiper.js"></script>
CDNを使う場合でも、SSLに対応しているかどうかで読み込めないことがあります。
「https://」「http://」の違いで読み込めないことを防止するために、「//」だけにすることをおすすめします。
// JavaScript <script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
バージョンがあっているか確認する
Swiperが動かないとき、使用するSwiperのバージョンと、参考にした解説ブログのバージョンが違っていることが多いです。
SwiperはバージョンによってJavaScriptのオプション設定の書き方が変わっています。
「Swiper」で検索したとき上位に表示されるブログの解説を見てもバージョン5、バージョン4が混在している状況なので注意が必要です。
さらに、バージョンをはっきり書いていないブログが上位表示されていることもあります。
これで解決できる可能性は高いです。
バージョン3以前は、これから新たに使うことや、検索上位に表示されていることはないと思いますが、バージョン4以降については注意してください。
- バージョン6 … 2020年7月3日~
- バージョン5 … 2019年9月17日~
- バージョン4 … 2017年8月30日~
- バージョン3 … 2015年2月11日~
- POINT
- Swiperが動かないときはバージョンを確認する!
進む・戻るボタンが動かない
進む・戻るボタンが動かない場合は、jsのオプションの書き方を確認して、バージョンにあった書き方をしてください。
// バージョン5以降の書き方 var Swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } })
// バージョン4以前の書き方 var Swiper = new Swiper ('.swiper-container', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', });
autoplayが動かない
autoplayが動かない場合は、jsのオプションの書き方を確認して、バージョンにあった書き方をしてください。
// バージョン4以降の書き方 var Swiper = new Swiper('.swiper-container', { autoplay: { delay: 5000, }, });
// バージョン3以前の書き方 var Swiper = new Swiper ('.swiper-container', { autoplay: 5000, });
IE11で動かない
バージョン6はIE(Internet Explorer)11で動かないようです。
バージョン5もIE11で動かないという情報もありましたが、こちらで確認するかぎりバージョン5.4.5は動作を確認できました。
バージョン6.3.2とまったく同じHTMLソースでJavaScriptとCSSだけ入れ替えました。
- バージョン6.3.2 … IE11動かない
- バージョン5.4.5 … IE11動く
fadeの動きがおかしい
スライドの画像をfadeさせるときに、以下のような現象がおきることがあります。
- 透過して裏写りしている
- 前の画像の残像が残っている
フェイドイン/フェイドアウトのスライダーを設定する場合、effect: "fade"を設定するだけでは挙動がおかしいようです。
fadeEffectを設定していない場合は、crossFade: trueを設定してみてください。
また、loopをtrueにしていると、swiper-slideの前後にswiper-slide-duplicateという要素が追加されてしまいます。
fadeのときは、loopがなくても
loop:trueにしている場合は、loop:falseにする、またはloopはfalseがデフォルトなのでオプション自体を削除してみてください。
effect: "fade", fadeEffect: { crossFade: true }, loop: false,
- POINT
- Swiperでfadeにするときは、fadeEffect: { crossFade: true }も忘れず設定する!
まとめ
Swiperの使い方を紹介しました。
Swiperが動かないときは以下のことを確認してみてください。
- JavaScript、CSSファイルが読み込めているか
- 相対パスなら、パスの記述ミスがないか
- 絶対パスなら、http、httpsが間違っていないか
- JavaScriptのオプションの書き方が読み込んでいるSwiperのバージョンとあっているか
SwiperはjQuery不要でオプションもたくさん使える高機能なスライダープラグインです。
Web制作では今後も使う機会の多いプラグインになると思います。
Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選
Web制作を効率化したいですか?この記事では、Web制作でよく使うスライダー、スクロールエフェクト、モーダルウィンドウ、郵便番号から住所を自動入力などに便利なJavaScript、jQueryのプラグイン、ライブラリを紹介しています。ぜひご覧ください。