jQuery不要！ Swiper.jsでスライダーを簡単に導入
Jqueryは不要で、多機能なスライダー用のjavascriptを試してみたので、
備忘録としてメモしました。
https://swiperjs.com/ 導入の前準備
CDN(外部から読み込み)で使う場合
<head>内に、cssを読み込む。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"></body>の直前に、jsを追加する。
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
スライダー部分のHTMLを用意
Class名は変えても大丈夫ですが、読み込んだcssが使えるため、そのままで記入しています。
スライダー内に文章などを入れたい場合は、.swiper-slideの中に色々記載すればOK！
<div class="swiper slider1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="“〇〇”" alt=""></div>
<div class="swiper-slide"><img src="“〇〇”" alt=""></div>
<div class="swiper-slide"><img src="“〇〇”" alt=""></div>
</div>
</div>
</body>直前の、swiper-bundle.min.jsを読み込んだ次の行に下記も追加します
<script>
const swiper = new Swiper('.slider1', {
});
</script>
スライダーの大きさを変えたいときは、下記のように、全体を囲む<div>のサイズを変更します。
.swiper.slider1 {
width: 100%;
height: 400px;
}
基本的なアレンジ
ページネーションやナビゲーション(左右の矢印)を追加したい場合
htmlに下記のように追加します。
<div class="swiper slider1">
<div class="swiper-wrapper">
<!-- contents -->
</div>
<!-- pagination -->
<div class="swiper-pagination"></div>
<!-- navigation-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
JSの方は下記を追加。
const swiper = new Swiper('.slider1', {
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
矢印の色や形はcssで変更可能です。
/* swiper pagination */
.swiper-pagination-bullet{
background: white;
opacity:0.5; /*透明度を変更したいとき*/
}
.swiper-pagination-bullet-active{
background: pink;
opacity:1; /*透明度を変更したいとき*/
}
/* swiper button */
.swiper-button-next, .swiper-button-prev{
color: pink;
}
その他基本的なアレンジ
それぞれ１行付け足してあげることで、簡単にアレンジをすることが可能です！
const swiper = new Swiper('.swiper1', {
// Optional parameters
loop: true, //ループさせる
slidesPerView: 3, //1回で何個の画像を表示させるか
spaceBetween: 30, //スライダー同士の間隔を設定
centeredSlides: true, //スライダーを中央に持ってくる
});
その他1:複数のスライダー設置
2こ以上のスライダーを設置したいときは、HTMLのclass名にそれぞれのスライダー名を追加して分けます。
<div class="swiper slider1">
<div class="swiper-wrapper">
<!-- contents -->
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container slider2">
<div class="swiper-wrapper">
<!-- contents -->
</div>
<div class="swiper-pagination"></div>
</div>
const swiper1 = new Swiper('.slider1', {
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
const swiper2 = new Swiper('.slider2', {
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
その他２:切り替えをフェードアウトにする
こちらも、すでに設定が用意されているので、javascript内に数行追加します。
const swiper = new Swiper('.swiper1', {
effect: 'fade',
autoplay: {
delay: 5000,
},
});
| delay: 〇〇, | 自動再生の速度。単位がms ( 1秒=1000ms) |
| disableOnInteraction: false, | falseで、スライドを操作中にも自動再生が止まらないようにすることが可能 |
| stopOnLastSlide | 最後のスライダーになったら、自動再生が止まるようにできます。(loopの指定をしている場合は効果なし) |
などなど。。
その他3:表示する枚数をレスポンシブ対応にする
ブラウザ幅によって一度に表示させる枚数を変更したい時も、javascript内で設定することが可能です。
const slider1 = new Swiper('.slider1', {
loop: true,
slidesPerView: 3,
spaceBetween: 50,
// ブレークポイントの設定
breakpoints: {
// width<= 414px
414: {
slidesPerView: 1,
spaceBetween: 30,
},
// width <= 768px
768: {
slidesPerView: 2,
spaceBetween: 40,
},
// width <= 1024px
1024: {
slidesPerView: 3,
spaceBetween: 50,
}
},
});
ほかにもいろいろ仕様が用意されているので、下記公式ページのdemoが参考になります。
