Swiper

slickよりjQに依存しない分良いという説。。

ただしカスタマイズするならどちらにしても少し手間だったが、、、
デメリットは公式が英語表記だという点らしい。が!ブログもたくさんあるので大丈夫だとか。。。

以下はとーっても参考になるけど、バージョンが少し古いのかな?
クラス名を調整してCDNで読み込んだらいけた。

なお、矢印のカスタマイズも可能。以下は参考に記録

/* slider */

.p-slid01 {
    width: 1080px;
    height: 500px;
    background: #a99fdc;
    margin: 0 auto 100px;
}

.p-slid02 {
    width: 1080px;
    height: 500px;
    background: #f4c9c9;
    margin: 0 auto 100px;
}

.p-slid03 {
    width: 1080px;
    height: 500px;
    background: #e1e5a6;
    margin: 0 auto 100px;
}

/* 矢印外 */
.swiper-button-next, .swiper-button-prev {
    background-color: #008B9B;
    color: #fff;
    width: 50px;
    bottom: 0;
    top: 540px;
}

.swiper-button-next {
    right: 260px;
}

.swiper-button-prev {
    left: 880px;
}

/* 矢印中 */
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px;
}

.swiper-pagination-fraction {
    width: 1080px;
    text-align: right;
}

.swiper-pagination-current {
    font-size: 30px;
}

.swiper-button-prev::before{
    content: "";
    right: 15px;
	width: 12px;
	height: 2px;
	background: #fff;
    position: absolute;
}

.swiper-button-next::before {
    content: "";
    left: 15px;
	width: 12px;
	height: 2px;
	background: #fff;
    position: absolute;
}
【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介 | HPcode(えいちぴーこーど)
スライダー系プラグインの最高峰と名高い「Swiper」の紹介です。いろんなスライダープラグイン使ってますが、実現できるパターンが一番多いのではないかと思います。jQueryに依存していない点も評価が高いポイントですね。 レスポンシブ対応はも
Getting Started With Swiper
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

お次に、複数設置したい際
クラス分けを別々にすれば良いという記事もたくさん見たが、
私がすると、なぜだかな。。swiperの大元の親クラス名を変更するとうまく動きが再現できない。
実際には同じクラス名でも稼働したのだが、
ボタン等をカスタマイズしてたため、複数スライドのボタンが各所連動したりと難点が、、、。
ひとまず、スライドに対しての指示は置きつつ、親クラスに続けて記述したところ別々の挙動にすることができた!

//スライド01
var swiper = new Swiper('.p-service01 .swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
    clickable: true,
  },
});
//スライド02
var swiper = new Swiper('.p-staff__sp .swiper', {
  navigation: {
    nextEl: '.p-staff__sp .swiper-button-next',
    prevEl: '.p-staff__sp .swiper-button-prev',
  },
  loop: true,
  pagination: {
    el: '.p-staff__sp .swiper-pagination',
    type: 'fraction',
    clickable: true,
  },
});

以下お世話になった記事

Swiperのナビゲーションが連動しないようにしたい | teratail
### 同一ページのSwiperのナビゲーションが連動してしまいます Swiperでスライダーを作っています。 同一ページに2枚のSwiperを設置しています。 ナビゲーションをスライドの外に

コメント

タイトルとURLをコピーしました