スライダープラグイン【slick】を使って全画面スライドショーを実装。
「slickの実装方法」と「slickのカスタマイズ」について解説していきます。
画像のスライドショーにはいろんな方法がありますが、jQueryベースの【slick】が安定していてカスタマイズもしやすいのでオススメです。
動作は下のデモページボタンから確認できます。
【全画面スライドショー】
slickの実装方法
まずは、jQueryベースのプラグインなのでjQueryの実装します。
slickを使用する為には二種類あり「外部リンクslickファイル」か「ローカルデータslickファイル」どちらかです。
外部リンクslickファイル
<head></head>の中に下記のコードを入力。
jquery・css・jsのリンクになります。
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- js -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
ローカルデータslickファイル
slickファイルを自身のPCにダウンロード
▪slick公式サイトhttps://kenwheeler.github.io/slick/
ダウンロードが完了したらzipファイルを解凍。
フォルダ「slick-1.8.1」→「slick-1.8.1」→「slick」→slick.css・slick.min.jsのファイルが入っています。
その中で必須になるslickファイルはslick.min.js・slick.css・slick-theme.css
slickの3つのファイルを下記のフォルダ構成にします。
index.htmlの<head></head>の中に下記コードを入力。
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/commmon.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<!-- js -->
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
フワッと切り替え(background-image版)
See the Pen スリックスライダーフワッと切り替え(background-image版) by pull-design (@design90806871) on CodePen.
【コード一覧】背景画像でふわっと切り替え
ulで囲みliに対してbackground-imageで画像を配置します。
HTML
<ul class="slider">
<li></li>
<li></li>
<li></li>
</ul>
CSS
/* リセットCSS */
body,ul,li { padding: 0; margin: 0;}
/* スリックスライダー */
.slider li {
width: 100%;
height: 100vh;
object-fit: cover;
}
.slider li:first-of-type {
background-image: url(https://picsum.photos/1921/1080);
}
.slider li:nth-of-type(2) {
background-image: url(https://picsum.photos/1922/1081);
}
.slider li:last-of-type {
background-image: url(https://picsum.photos/1923/1082);
}
JS
$('.slider').slick({
infinite: true, //スライドのループを有効
arrows: false, //前へ、次への矢印ボタンの有無
fade: true, //スライドの切り替えをフェードに
speed: 2000, //アニメーションの切り替えスピード
autoplaySpeed: 3000, //自動再生時のスライドの静止時間
autoplay: true, //スライダーの自動再生
pauseOnFocus: false, //フォーカスで一時停止を無効
pauseOnHover: false, //マウスホバーで一時停止を無効
pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});
画面でふわっと切り替え【コード】
See the Pen スリックスライダーフワッと切り替え by pull-design (@design90806871) on CodePen.
【コード一覧】画面でふわっと切り替え
ulで囲みliの中に画像を入れます。このコードのimgは自動で変わる画像に設定しているので、画像を設定したい場合は、imgフォルダを作ってその中に画像を入れて指定しましょう。
HTML
<ul class="slider">
<li><img src="https://picsum.photos/1920/1080"></li>
<li><img src="https://picsum.photos/1950/1082"></li>
<li><img src="https://picsum.photos/1980/1081"></li>
</ul>
CSS
/* リセットCSS */
body,ul,li {padding: 0; margin: 0;}
/* スリックスライダー */
.slider img {
width: 100%;
height: 100vh;
object-fit: cover;
}
js
$('.slider').slick({
infinite: true, //スライドのループを有効
arrows: false, //前へ、次への矢印ボタンの有無
fade: true, //スライドの切り替えをフェードに
speed: 2000, //アニメーションの切り替えスピード
autoplaySpeed: 3000, //自動再生時のスライドの静止時間
autoplay: true, //スライダーの自動再生
pauseOnFocus: false, //フォーカスで一時停止を無効
pauseOnHover: false, //マウスホバーで一時停止を無効
pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});
・ライダーが止まってしまう場合がある時は下記コードを入力すると止まることなく動いてくれます。
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
レスポンシブ対応にもなっているので、コードが多いですがコピーペーストで実装できます。
slickオプション一覧
オプション名 | 説明 | 初期値 |
accessibility | キーボードの矢印キーやTabキーで操作設定 | true |
adaptiveHeight | スライダーの高さの自動調整 | false |
autoplay | スライダーの自動再生 | false |
autoplaySpeed | 自動再生のスピード(ミリ秒単位) | 3000 |
arrows | 前へ、次への矢印ボタン | true |
asNavFor | 他のスライダーのナビゲーションに設定 | 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’ |
dots | ドットナビゲーションボタンを表示するかどうか | false |
dotsClass | ドットナビゲーションボタンのclass名を指定 | ‘slick-dots’ |
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 | レスポンシブのブレイクポイントを指定 | 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のtransitionを有効にするかどうか | true |
useTransform | CSSのtransformを有効にするかどうか | true |
variableWidth | スライド毎に横幅が違う場合、スライド幅を可変にするかどうか | false |
vertical | スライドを縦方向にするかどうか | false |
verticalSwiping | 縦方向のスワイプを有効にするかどうか | false |
rtl | スライダーの方向を右から左に変更するか(right to left) | false |
waitForAnimate | スライドアニメーション中にスライドを前後させる要求を無視するか | true |
zIndex | スライドの重なり順 | 1000 |
クリックでスクロール
See the Pen スリックスライダー_slick by pull-design (@design90806871) on CodePen.
両サイドちら見せスライダー
See the Pen 両サイドちら見せスライダー by pull-design (@design90806871) on CodePen.
画像リスト_スリック
See the Pen 画像リスト_スリック by pull-design (@design90806871) on CodePen.
jQuery不要のスライダー
Swiperの場合はjQuery不要で利用可能です。
外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能です。
フルスクリーンでズームしながら画像を切り替える機能が付いています。