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を設置しています。 ナビゲーションをスライドの外に

コメント