スライダーはいろいろなものがありますが現在一番便利なのは「Swiper.js」、jQueryに依存しないといのが素晴らしい。

いろいろなフレームワークを使う現在jQueryに依存しないというのはトラブルが少なく、パラメータが豊富でシンプルなものから凝ったスライドが実装出来ます。

ライブラリーの読み込み

下記よりダウンロードも可能ですがおススメはCDN。

最新バージョンはこちらで検索

現在最新の4.2.2の場合

基本のHTML構成

スライダーのサイズを指定

サイズをCSSで追加します、ほとんどは100%幅での使用となるので

JSの設定

オプション

speed: 1000, ・・・ デフォルトは300、数字が大きくなると遅くなる。
loop: true, ・・・ スライダーが最後まで行ったら最初に戻る。

ナビゲーションを表示
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},

ページネーションを表示
pagination: {
el: ‘.swiper-pagination’,
},

たくさんのパラメータがあるので、詳しくは公式ドキュメントを参照してください。

<例>
オートプレイ、スピード1000、間隔4000、ナビゲーションを表示、ページネーションを表示