jQueryを使わない高機能スライダープラグイン【Swiper】もちろんレスポンシブ対応

<script>
var mySwiper = new Swiper ('.swiper-container', {
// オプション
direction: 'vertical',
loop: true,
// ページネーション
pagination: {
el: '.swiper-pagination',
},
// ナビゲーション
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// スクロールバー
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>

以上で基本的な動きが実装可能となります。

<script>
var mySwiper = new Swiper ('.swiper-container', {
// スライダーの方向を指定（'horizontal' or 'vertical'）
direction: 'vertical',
//スライドのスピード（ミリ秒）
speed: 300,
//trueに設定すると、アクティブなスライドの高さにその高さを適用します
autoHeight: false,
//入れ子になったSwiperでtrueに設定。親方向と同じ方向を使用するネストされたスワイパでのみ使用する
nested: false,
//エフェクトの設定（"slide", "fade", "cube", "coverflow" or "flip"）
effect: slide,
//trueの場合 、Swiperにカーソルを置くと、「グラブ」カーソルが表示されます
grabCursor: false,
//タッチイベントに反応するターゲット要素の指定（'container'[ swiper-container ] or 'wrapper'[ swiper-wrapper ]）
touchEventsTarget: 'container',
//タッチ移動をトリガーする許容角度
touchAngle: 45,
//短いスワイプを無効にする場合はfalseに設定します
shortSwipes: true,
//長いスワイプを無効にする場合はfalseに設定します
longSwipes: true,
//無効にすると、スライダーは放したときにのみアニメーション表示され、指を押したまま移動することはありません
followFinger: true,
//「タッチ距離」がこの値よりも低くなるとスワイパーは動きません。pxで表します。
threshold: 0,
//前のスライド方向へのスワイプを無効にするにはfalseに設定します （左または上へ）
allowSlidePrev: true,
//次のスライド方向へのスワイプを無効にするにはfalseに設定します （左または上へ）
allowSlideNext: true,
//スワイプ中にリンク上で偶発的に望ましくないクリックが発生しないようにするには、 trueに設定します。
preventClicks: true,
//有効にすると、Swiperはすべての画像を強制的に読み込みます
preloadImages: true,
//有効にすると、すべての内部イメージ（<img>タグ）がロードされた後にスワイパが再初期化されます。（preloadImages: true の設定も必須）
updateOnImagesReady: true,
//連続ループモードを有効にするには、 trueに設定します。
loop: false,
// ページネーション
pagination: {
el: '.swiper-pagination',
},
// ナビゲーション
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// スクロールバー
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>