いつかと思っていたこれ。
個人的によく使うなーって思ったものをまとめました。
今回紹介するものはこちらの5つ demo
slickでよく使う設定のサンプルコード
基本的にHTMLはこちらコードです。
<ul class="slider_01">
<li><img src="img/img_01.png" alt="画像01"></li>
<li><img src="img/img_02.png" alt="画像02"></li>
<li><img src="img/img_03.png" alt="画像03"></li>
</ul>これから紹介するサンプルはクラス名slider_01 を変更してjsを指定していってます。
各スライダーでどのようなオプションを指定しているのか見ていきましょう。
slickの基本形 矢印とドッド付きのスライダー
$(function(){
$('.slider_01').slick({
autoplay: false, // 自動再生OFF
autoplaySpeed: 1000, // 自動再生速度1000ミリ秒
speed: 1000, // スライドアニメーションの速度1000ミリ秒
swipe: true, // スワイプで切り替えON
arrows: true, // 矢印ON
dots: true, // ドットON
});
});これがおそらく基本形。
このまま使うってことはあんまりない気がしてますが、応用は基本あってのことなのでご紹介。
フェードインでスライドを切り替える方法
$(window).on('load', function() {
$(function () {
$(".slider_02").slick({
autoplay: true, // 自動再生ON
fade: true, // フェードON
dots: false, // ドットOFF
arrows: false, // 矢印OFF
speed: 2000, // スライド、フェードアニメーションの速度2000ミリ秒
autoplaySpeed: 4000, // 自動再生速度4000ミリ秒
pauseOnFocus: false, // フォーカスで一時停止OFF
pauseOnHover: false, // マウスホバーで一時停止OFF
});
});
});次はフェードイン、フェードアウトで変化するスライダーです。
これはfvなどの装飾的に使われる印象です。
slickはフォーカスやマウスホバーで一時停止する（スライダーが止まる）初期値が入っています。
これによって、他のアニメーションとタイミングがズレたり、動いていないと勘違いされたりするのでpauseOnFocus: false,、pauseOnHover: false,は入れておくのが◎
横並びにして複数の要素を見せる方法
$(function(){
$('.slider_03').slick({
autoplay: false, // 自動再生：無効
autoplaySpeed: 1000, // 自動再生時のスライド速度：1000ms
speed: 1000, // スライド切り替え速度：1000ms
slidesToShow: 1, // 表示するスライド数：1枚
swipe: true, // タッチスワイプ：有効
arrows: true, // 左右矢印ナビゲーション：有効
dots: true, // ページネーションドット：有効
infinite: false, // ループ再生：無効
pauseOnFocus: false, // フォーカス時に一時停止：無効
pauseOnHover: false, // ホバー時に一時停止：無効
variableWidth: true, // スライド幅可変：有効
responsive: [
{
breakpoint: 768, // ブレークポイント：768px
settings: {
centerMode: true, // 中央表示：有効
slidesToShow: 1, // 表示するスライド数：1枚
}
}
]
});
});これも使いますね。
カスタム投稿をトップページにいくつか載せておくときなど、結構これですね。
サンプルは画像ですが、<li>や<div>で囲ったコンテンツもスライドにできるので、いろんな見せ方のときに使えるので便利です。
流れ続けるスライダーの実装
$('.slider_04').slick({
autoplay: true, // 自動再生：有効
autoplaySpeed: 0, // 自動再生時のスライド速度：0ms
speed: 20000, // スライド切り替え速度：20000ms
slidesToShow: 1, // 表示するスライド数：1枚
cssEase: "linear", // スライドアニメーションのイージング：linear
arrows: false, // 左右矢印ナビゲーション：無効
dots: false, // ページネーションドット：無効
pauseOnHover: false, // ホバー時に一時停止：無効
pauseOnFocus: false, // フォーカス時に一時停止：無効
variableWidth: true, // スライド幅可変：有効
});これも装飾的な使い方。
テキストを入れて文字を流すこともありますね。
サムネイル付きのスライドの実装
$(function () {
let $thumbs__slider = $('#thumbs__slider');
/*--- 連動サムネイル（ドット）設定 -----------------------*/
// スライダー初期化時
$thumbs__slider.on('init', function (event, slick, currentSlide, nextSlide) {
// スライドアイテム取得
slideItem = $('#thumbs__slider .slick-slide')
// スライドの数だけループ
for (let i = 0; i < slick.slideCount; i++) {
// ループ回数をキーにn番目のスライドを取得
let slideImg = slideItem.filter(function () {
return $(this).data('slick-index') === i;
}).find('img').clone();
// n番目のドットを取得
let dot = $('.thumbs_list').find("li").eq(i);
// n番目のスライド画像のURLを取得
let src = slideImg.attr('src');
// n番目のドットにn番目のスライド画像を背景に当て込み
dot.css('background', "url(".concat(src, ")"));
// 背景の表示の仕方を指定
dot.css('background-size', 'cover');
}
});
$thumbs__slider.slick({
arrows: false, // 前・次のボタンを表示しない
dots: true, // ドットナビゲーションを表示する
dotsClass: 'thumbs_list', // ドットのクラス名を変更
appendDots: $('.thumbs_dots'), // ドットの生成位置を変更
customPaging: function (slick, index) { // ドットの中身を空にする
return '';
},
fade: true, // スライド切り替えをフェード
autoplay: false, //自動再生させない
slidesToShow: 1, // 表示させるスライド数
});
});以前、カスタム投稿の時のコードを紹介しています。
全体的なつくりは同じです、サムネイル付きはカスタムで使うことが多そうですが一応残しておきます。
