slickを使用する
CDNで設置する
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>HTMLの記述
<ul class="slider">
<li><img src="img/01.jpg" alt="img01"></li>
<li><img src="img/02.jpg" alt="img02"></li>
<li><img src="img/03.jpg" alt="img03"></li>
<li><img src="img/04.jpg" alt="img04"></li>
<li><img src="img/05.jpg" alt="img05"></li>
<li><img src="img/06.jpg" alt="img06"></li>
<li><img src="img/07.jpg" alt="img07"></li>
<li><img src="img/08.jpg" alt="img08"></li>
</ul>JSの記述
$('.slider').slick();設定を追加する場合
$('.slider').slick({
autoplay:true, // 自動再生を設定
autoplaySpeed:5000, // スライド切り替えの時間を設定
dots:true // インジケーターを表示
});その他の設定
| accessibility | タブと矢印キーのナビゲーション | true |
|---|---|---|
| adaptiveHeight | スライドの高さの自動調整 | false |
| autoplay | 自動再生 | false |
| autoplaySpeed | 自動再生のスピード（ミリ秒単位） | 3000 |
| arrows | スライドの左右の矢印ボタン | true |
| asNavFor | スライダを他のスライダのナビゲーションに設定する（class名またはID名） | null |
| appendArrows | スライドの左右の矢印ボタンを挿入する場所を変更 | $(element) |
| appendDots | ドットインジケーターの場所変更 | $(element) |
| prevArrow | 左の矢印ボタンのHTMLをカスタマイズ | <button type=”button” class=”slick-prev”>Previous</button> |
| nextArrow | 右の矢印ボタンのHTMLをカスタマイズ | <button type=”button” class=”slick-next”>Next</button> |
| centerMode | スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用） | false |
| centerPadding | センターモード時のサイドパディング。見切れるスライドの幅。’px’または’％’。 | 50px |
| cssEase | CSS3アニメーションイージングを設定 | ease |
| customPaging | dots:trueのとき、ドットをカスタマイズ | n/a |
| dots | ドットインジケーターの表示 | false |
| dotsClass | ドットインジケーターのクラス名を設定 | slick-dots |
| draggable | マウスでのドラッグ設定 | true |
| fade | スライダーの切り替えをスライドではなくフェイドインにするか | false |
| focusOnSelect | クリックでのスライド切り替えを有効にするか | false |
| easing | jQueryアニメーションイージングを追加 | linear |
| edgeFriction | infinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定 | 0.15 |
| infinite | スライドのループを有効にするか | true |
| initialSlide | スライドの開始番号 | 0 |
| lazyLoad | 画像の遅延読み込みを設定（’ondemand’もしくは’progressive’） | ondemand |
| mobileFirst | レスポンシブの設定でモバイルの計算を優先させる | false |
| pauseOnFocus | 自動再生時にスライドにフォーカスした際、自動再生をストップさせるか | true |
| pauseOnHover | 自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか | true |
| pauseOnDotsHover | 自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか | false |
| respondTo | レスポンシブの基準を設定（’window’もしくは’slider’もしくは’min’） | window |
| responsive | breakpointで設定したいブレイクポイントを設定（settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定） | none |
| rows | スライドの行数を設定（slidesPerRowを使用して、各行に含めるスライドの数を設定） | 1 |
| slide | スライドとして使用する要素を設定 | ” |
| slidesPerRow | rowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定 | 1 |
| slidesToShow | 表示するスライド数を設定 | 1 |
| slidesToScroll | スクロールするスライド数を設定 | 1 |
| speed | スライド/フェードアニメーションの速度を設定 | 300 |
| swipe | スワイプを有効にするか | true |
| swipeToSlide | slidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かす | false |
| touchMove | タッチでスライドさせるか | true |
| touchThreshold | スワイプでスライドさせる距離を設定（1 / touchThreshold）*スライダの幅 | 5 |
| useCSS | CSS traditionを有効にするか | true |
| useTransform | CSS transformを有効にするか | true |
| variableWidth | 可変幅のスライド（スライドの幅をバラバラにするか） | false |
| vertical | 垂直スライドモード | false |
| verticalSwiping | 垂直のスワイプを有効にするか | false |
| rtl | スライダの方向を右から左に変更するか（right to left） | false |
| waitForAnimate | スライドアニメーション中にスライドを前後させる要求を無視するか | true |
| zIndex | スライドの重なり順 | 1000 |