どうも、ふくろぐのふくミン（@fukuroblog）です。
今回は、画像スライダーの「Swiper」についてご紹介します。
つい最近、仕事で画像のスライド機能を使って欲しいってお客さんに言われて、
何を使おうかなぁ。って、いろいろ調べたんだよね。
画像のスライド機能って、たくさんあるからどれを使って良いか、悩むよね。
でも、スライドって言ったら「jQuery」ってイメージが強いけど…。
私も最初は、そう思ってたんだけど、調べていくうちに…今は「脱jQuery」らしいんだよね。
案件によって、jQueryが使えない状況とか、競合しちゃったりとかで…。
最近は、jQueryを使わない方法が人気らしいよ。
最近は、jQueryを使わなくても、汎用性の高い画像スライダーの実装が可能な「Swiper」が人気となっています。
この記事を読むと得られること
- jQueryを使わない画像スライダー「Swiper」の実装方法
- コピペで画像スライダー「Swiper」の実装が可能
- 「Swiper」の矢印が効かない時の対処方法
目次
画像スライダー「Swiper」の実装方法
「Swiper」は、CDNが使用できるので、下記のように指定箇所に記述することで、cssとjsを読み込むことができます。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
</body>
</html>下記、cssのファイルは<head></head>に記述しましょう。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">下記、jsのファイルは<body></body>に記述しましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>次に、画像スライダーを使いたい箇所に下記を記述します。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">画像</div>
<div class="swiper-slide">画像</div>
<div class="swiper-slide">画像</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>以上が最低限の記述で、簡単に画像スライダーを実装する方法となります。
Swiperのオプション設定
Javascriptの記述を加えることで、オプションの設定が可能です。
スライダーをループさせる方法
var myswiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
});全てのオプションは、 http://idangero.us/swiper/api/ にて載っているので、参考にしてみてください。
矢印が効かない時の対処法
この前、Swiperを実装したくて、他のサイトを参考にしたんだよね。
でも、なぜか矢印が効かなくて、スライド出来なかったんだよ…。
見た目は、ちゃんとスライドしそうなのに、いざ矢印をクリックすると効かないんだよね。
その原因は、バージョンにあることがわかったよ！
Swiperで矢印が効かない時は、バージョンと記述が合っていないことが原因の可能性が高いです。
Swiperの2020年7月の時点では、最新バージョンは（5.4.5）となります。
最新バージョン（5.4.5）では以下の記述
<script>
var mySwiper = new Swiper ('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
ちなみに古いバージョンの記述はこちら
<script>
var swiper = new Swiper ('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
</script>Swiperを実装する際は、バージョンの確認をしてから行いましょう。
画像スライダー「Swiper」のまとめ
ここまでのまとめ
- jQueryを使わない「Swiper」が便利で簡単に実装できる
- コピペで実装できる
- 矢印が効かない原因はバージョンにある可能性が高い
以上、簡単にコピペで出来る、jQueryを使わない画像スライダー「Swiper」のご紹介になります。
Swiperは、簡単に画像スライドを実装に出来るので、おすすめです。検索するとたくさん記事も出てくるので、参考になります。
みなさんも是非、Swiperを使ってみてください！
それでは！