仕事で制作担当しているサイト、使用しているswiperのバージョンがことごとく古い問題。。
swiperの使い方をググっても、大抵最新の記述で出てくる。
そして古いバージョンでの記述について、情報が少ない。。(私のググり方の問題でしょうか…)
APIを見ればいいのですが、英語なのでどうしてもとっつきにくいなぁと感じる人も多いはず。
特に私のような経験の浅い人にとっては。
API
てことで、下記に使用頻度の高めなオプションで注意が必要なものを挙げてみます。
※ここでいう古いバージョンとは、3.x系以前という感じです。
※恐らく3.x系以前と4.x系以降で記述の仕方が変わっている?(違かったらすみません)
注意が必要なオプション例
ナビゲーション
3.x系以前
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
4.x系以降
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
ページネーション
3.x系以前
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
});
4.x系以降
var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
}
});
自動再生
3.x系以前
var mySwiper = new Swiper('.swiper-container', {
autoplay: 5000,
autoplayStopOnLast: true,
});
4.x系以降
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 5000,
stopOnLastSlide: true,
}
});
などなど他にもたくさんあるのですが、多くの人がよく使用するのはこのあたりかと!
何かの参考になれば。
参考サイト
きっとこのサイトにお世話になっている人はかなりいることでしょう。
swiperについてググると大体このサイトにたどり着きますね!
私自身、旧バージョンの記述については大体このページから学びました。