LoginSignup
3
2

More than 3 years have passed since last update.

【Swiper】オプションが全然反映されない。。バージョンが古いからでは?

Posted at

仕事で制作担当しているサイト、使用しているswiperのバージョンがことごとく古い問題。。
swiperの使い方をググっても、大抵最新の記述で出てくる。
そして古いバージョンでの記述について、情報が少ない。。(私のググり方の問題でしょうか…)

APIを見ればいいのですが、英語なのでどうしてもとっつきにくいなぁと感じる人も多いはず。
特に私のような経験の浅い人にとっては。

API
- Swiper 2.x
- Swiper 3.x
- 最新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についてググると大体このサイトにたどり着きますね!
私自身、旧バージョンの記述については大体このページから学びました。

swiper.js使ってみたからそのオプションについて

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2