slickカスタマイズ

オプションが多く汎用性の高いslidk-Sliderですが、自社の制作時に使いやすいよう、もう少し踏み込んで調整してみました。

まずは【デモ】
ベースとなる「slick」はここからダウンロードできます。
リセットCSS「base.css」はこちら。
左右のボタン、黒丸ボタンには「Fontawesome」を使っています。

Source

<link rel="stylesheet" type="text/css" href="/assets/css/base.css">
<link rel="stylesheet" type="text/css" href="/assets/lib/jquery/slick/slick.css">
<link rel="stylesheet" type="text/css" href="/assets/lib/jquery/slick/slick-theme.css">
<link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.min.css">
<script src="/assets/lib/jquery/core/jquery-2.2.4.min.js"></script>
<script src="/assets/lib/jquery/slick/slick.min.js"></script>

<!-- ///////////////////////////////////////////////

＜画像が一瞬縦に並ぶのを回避する処理＞
・各画像を囲む枠に「.slick-slide」を付加

/////////////////////////////////////////////// -->

<p>基本スライド</p>
<div class="regular slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
</div>
<hr>
<p>左右が見えるセンター配置のスライド　<em>※常にチラ見せ</em></p>
<div class="center slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=7" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=8" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=9" alt=""></div>
</div>
<hr>
<p>左右が見えるセンター配置のスライド　<em>※画面幅に応じて見える幅が変わる。768以下で１枚表示に切り替え。</em></p>
<div class="centerRes slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=7" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=8" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=9" alt=""></div>
</div>
<hr>
<p>画像サイズが異なるスライド</p>
<div class="variable slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/200x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/100x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/200x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/300x300?text=6" alt=""></div>
</div>
<hr>
<p>ブレイクポイント768・480で表示数切り替え</p>
<div class="multiple-item slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=7" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=8" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=9" alt=""></div>
</div>
<hr>
<p>サムネイル付き</p>
<div class="thumb-item slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=7" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=8" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=9" alt=""></div>
</div>
<div class="thumb-item-nav slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=7" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=8" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=9" alt=""></div>
</div>
<hr>
<p>黒丸ボタンのカスタマイズ</p>
<div class="regularSample dotteSolid slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=7" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=8" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=9" alt=""></div>
</div>
<hr>
<p>黒丸ボタンのカスタマイズ</p>
<div class="regularSample dotteBar slickSlider">
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=1" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=2" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=3" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=4" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=5" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=6" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=7" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=8" alt=""></div>
    <div class="slick-slide"><img src="http://placehold.it/350x300?text=9" alt=""></div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!-- ///////////////////////////////////////////////

＜画像が一瞬縦に並ぶのを回避する処理＞

・各画像を囲む枠に「.slick-slide」を付加

/////////////////////////////////////////////// -->

<p>基本スライド</p>

</div>

<hr>

<p>左右が見えるセンター配置のスライド　<em>※常にチラ見せ</em></p>

</div>

<hr>

<p>左右が見えるセンター配置のスライド　<em>※画面幅に応じて見える幅が変わる。768以下で１枚表示に切り替え。</em></p>

</div>

<hr>

<p>画像サイズが異なるスライド</p>

</div>

<hr>

<p>ブレイクポイント768・480で表示数切り替え</p>

</div>

<hr>

<p>サムネイル付き</p>

</div>

</div>

<hr>

<p>黒丸ボタンのカスタマイズ</p>

</div>

<hr>

<p>黒丸ボタンのカスタマイズ</p>

</div>

    //////////////////////////////////////////////
    //
    //    SlickSlider
    //
    //////////////////////////////////////////////
    if ($('.slickSlider').length) {

        /* ====================================================
        　標準スライド
        ==================================================== */
        $(".slickSlider.regular").slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
        /* ====================================================
        　センター配置：左右チラ見せ
        ==================================================== */
        $(".slickSlider.center").slick({
            dots: true,
            infinite: true,
            centerMode: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            centerPadding: '25%'
        });
        /* ====================================================
        　センター配置：画面幅に応じて左右が見える。
        　　　　　　　：767以下でレスポンシブ対応（1枚表示）
        ==================================================== */
        $(".slickSlider.centerRes").slick({
            infinite: true,
            dots:true,
            arrows:true,
            slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            variableWidth: true,
            autoplay:false,
            responsive: [{
                breakpoint: 767,
                    settings: {
                        infinite: true,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        centerMode: false,
                        variableWidth: false,
                        arrows:false,
                        dots:false,
                    }
            }]
        });
        /* ====================================================
        　画像幅の異なるスライド
        ==================================================== */
        $(".slickSlider.variable").slick({
            dots: true,
            infinite: true,
            variableWidth: true
        });
        /* =================================================================
        　レスポンシブ対応：[0]～2枚表示～[480]～3枚表示～[768]～6枚表示～
        ================================================================= */
        $('.slickSlider.multiple-item').slick({
            infinite: true,
            dots:true,
            slidesToShow: 6,
            slidesToScroll: 6,
            responsive: [{
                breakpoint: 768,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                    }
            },{
                breakpoint: 480,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2,
                    }
                }
            ]
        });
        /* =================================================================
        　サムネイル付きスライド
        ================================================================= */
        $('.slickSlider.thumb-item').slick({
            infinite: true,
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            asNavFor: '.thumb-item-nav'
        });
        $('.slickSlider.thumb-item-nav').slick({
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 1,
            asNavFor: '.thumb-item',
            focusOnSelect: true,
        });
    }

100

101

102

103

//////////////////////////////////////////////

// SlickSlider

//////////////////////////////////////////////

if ($('.slickSlider').length) {

/* ====================================================

　標準スライド

==================================================== */

$(".slickSlider.regular").slick({

dots: true,

infinite: true,

slidesToShow: 3,

slidesToScroll: 3

});

/* ====================================================

　センター配置：左右チラ見せ

==================================================== */

$(".slickSlider.center").slick({

dots: true,

infinite: true,

centerMode: true,

slidesToShow: 1,

slidesToScroll: 1,

centerPadding: '25%'

});

/* ====================================================

　センター配置：画面幅に応じて左右が見える。

　　　　　　　：767以下でレスポンシブ対応（1枚表示）

==================================================== */

$(".slickSlider.centerRes").slick({

infinite: true,

dots:true,

arrows:true,

slidesToShow: 1,

slidesToScroll: 1,

centerMode: true,

variableWidth: true,

autoplay:false,

responsive: [{

breakpoint: 767,

settings: {

infinite: true,

slidesToShow: 1,

slidesToScroll: 1,

centerMode: false,

variableWidth: false,

arrows:false,

dots:false,

}

}]

});

/* ====================================================

　画像幅の異なるスライド

==================================================== */

$(".slickSlider.variable").slick({

dots: true,

infinite: true,

variableWidth: true

});

/* =================================================================

　レスポンシブ対応：[0]～2枚表示～[480]～3枚表示～[768]～6枚表示～

================================================================= */

$('.slickSlider.multiple-item').slick({

infinite: true,

dots:true,

slidesToShow: 6,

slidesToScroll: 6,

responsive: [{

breakpoint: 768,

settings: {

slidesToShow: 3,

slidesToScroll: 3,

}

},{

breakpoint: 480,

settings: {

slidesToShow: 2,

slidesToScroll: 2,

}

]

});

/* =================================================================

　サムネイル付きスライド

================================================================= */

$('.slickSlider.thumb-item').slick({

infinite: true,

arrows: false,

slidesToShow: 1,

slidesToScroll: 1,

fade: true,

asNavFor: '.thumb-item-nav'

});

$('.slickSlider.thumb-item-nav').slick({

infinite: true,

slidesToShow: 4,

slidesToScroll: 1,

asNavFor: '.thumb-item',

focusOnSelect: true,

});

}

/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */

/* ====================================================
　3＠デフォルト
==================================================== */
/* スライドloading DF
-------------------------------------*/
.slickSlider {background:url(ajax-loader.gif) center no-repeat;} /* loading */

/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide {margin: 0px 0; border-right:1px solid #ffffff;}

/* 左右ボタンスタイル DF
-------------------------------------*/
.slick-prev,
.slick-next {
    z-index:10;
    width:auto;
    height:auto;
}
.slick-prev {left: 15px;}
.slick-next {right: 15px;}
.slick-prev:before,
.slick-next:before {
    font-family: FontAwesome;
    opacity: .75;
}
/* 黒丸ボタンスタイル DF
-------------------------------------*/
.slick-dots {bottom:-1.5em;}
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before {
    display:inline-block;
    padding:0;
    width:auto;
    height:auto;
    line-height:1;
}
.slick-dots li button {display:block;}
.slick-dots li button:before {
    position:relative;
    padding:0.25em;
    border-radius:50%;
    opacity:1;
}

/* ====================================================
　左右ボタンスタイル：＜＞
==================================================== */
.slick-prev:before,
.slick-next:before {color: #000000;}    /* ＜＞ 色 */
.slick-prev::before {content:"\f104";}    /* ＜ 形状 */
.slick-next::before {content:"\f105";}    /* ＞ 形状 */

@media print, screen and (min-width: 768px) {
    .slick-prev:before,
    .slick-next:before {font-size: 40px;}    /* ＜＞ サイズ */
}
@media screen and (max-width: 767px){
    .slick-prev:before,
    .slick-next:before {font-size: 30px;}    /* ＜＞ サイズ */
}

/* ====================================================
　黒丸ボタンスタイル：・・・
==================================================== */
.slick-dots li {margin:0 4px;}                   /* ●の間隔 */

.slick-dots li button::before {color:#cccccc;}              /* ● DF色 */
.slick-dots li button:hover:before {color:#f00;}            /* ● hover色 */
.slick-dots li.slick-active button::before {color:#000000;} /* ● active色 */

@media print, screen and (min-width: 768px) {
    .slick-dots li button::before {font-size:10px;}  /* ●サイズ */
}
@media screen and (max-width: 767px){
    .slick-dots li button::before {font-size:10px;}  /* ●サイズ */
}

/* ====================================================
　黒丸ボタンカスタマイズ：長方形横
==================================================== */
.dotteSolid .slick-dots li {margin:0 2px;}                           /* ●の間隔 */
.dotteSolid .slick-dots li button:before {display:none;}             /* ●の非表示 */
.dotteSolid .slick-dots li button {width:30px; height:5px;}          /* ボタンの形状 */
.dotteSolid .slick-dots li button {background:#75975e;}              /* ● DFの色 */
.dotteSolid .slick-dots li.slick-active button {background:#d9a300;} /* ● active色 */


/* ====================================================
　黒丸ボタンカスタマイズ：長方形縦
==================================================== */
.dotteBar .slick-dots {text-align:right;}              /* ●の配置 */
.dotteBar .slick-dots li {margin:0 4px;}               /* ●の間隔 */
.dotteBar .slick-dots li button:before {display:none;} /* ●の非表示 */
.dotteBar .slick-dots li button {                      /* ボタンの形状 */
    width:8px;
    height:15px;
    transform:rotate(45deg);
    }
.dotteBar .slick-dots li button {background:#cccccc;}              /* ● DFの色 */
.dotteBar .slick-dots li.slick-active button {background:#000000;} /* ● active色 */


/* ====================================================
　センター配置：画面幅に応じて左右が見える。
        　　　：767以下でレスポンシブ対応（1枚表示）
==================================================== */
@media print, screen and (min-width: 768px) {
.centerRes.slickSlider .slick-slide{
    width:400px !important;    /* ※PCの時の画像サイズ指定 */
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */

/* ====================================================

　3＠デフォルト

==================================================== */

/* スライドloading DF

-------------------------------------*/

.slickSlider {background:url(ajax-loader.gif) center no-repeat;} /* loading */

/* スライド同士の間隔 DF

-------------------------------------*/

.slick-slide {margin: 0px 0; border-right:1px solid #ffffff;}

/* 左右ボタンスタイル DF

-------------------------------------*/

.slick-prev,

.slick-next {

z-index:10;

width:auto;

height:auto;

}

.slick-prev {left: 15px;}

.slick-next {right: 15px;}

.slick-prev:before,

.slick-next:before {

font-family: FontAwesome;

opacity: .75;

}

/* 黒丸ボタンスタイル DF

-------------------------------------*/

.slick-dots {bottom:-1.5em;}

.slick-dots li,

.slick-dots li button,

.slick-dots li button::before {

display:inline-block;

padding:0;

width:auto;

height:auto;

line-height:1;

}

.slick-dots li button {display:block;}

.slick-dots li button:before {

position:relative;

padding:0.25em;

border-radius:50%;

opacity:1;

}

/* ====================================================

　左右ボタンスタイル：＜＞

==================================================== */

.slick-prev:before,

.slick-next:before {color: #000000;} /* ＜＞色 */

.slick-prev::before {content:"\f104";} /* ＜形状 */

.slick-next::before {content:"\f105";} /* ＞形状 */

@media print, screen and (min-width: 768px) {

.slick-prev:before,

.slick-next:before {font-size: 40px;} /* ＜＞サイズ */

}

@media screen and (max-width: 767px){

.slick-prev:before,

.slick-next:before {font-size: 30px;} /* ＜＞サイズ */

}

/* ====================================================

　黒丸ボタンスタイル：・・・

==================================================== */

.slick-dots li {margin:0 4px;} /* ●の間隔 */

.slick-dots li button::before {color:#cccccc;} /* ● DF色 */

.slick-dots li button:hover:before {color:#f00;} /* ● hover色 */

.slick-dots li.slick-active button::before {color:#000000;} /* ● active色 */

@media print, screen and (min-width: 768px) {

.slick-dots li button::before {font-size:10px;} /* ●サイズ */

}

@media screen and (max-width: 767px){

.slick-dots li button::before {font-size:10px;} /* ●サイズ */

}

/* ====================================================

　黒丸ボタンカスタマイズ：長方形横

==================================================== */

.dotteSolid .slick-dots li {margin:0 2px;} /* ●の間隔 */

.dotteSolid .slick-dots li button:before {display:none;} /* ●の非表示 */

.dotteSolid .slick-dots li button {width:30px; height:5px;} /* ボタンの形状 */

.dotteSolid .slick-dots li button {background:#75975e;} /* ● DFの色 */

.dotteSolid .slick-dots li.slick-active button {background:#d9a300;} /* ● active色 */

/* ====================================================

　黒丸ボタンカスタマイズ：長方形縦

==================================================== */

.dotteBar .slick-dots {text-align:right;} /* ●の配置 */

.dotteBar .slick-dots li {margin:0 4px;} /* ●の間隔 */

.dotteBar .slick-dots li button:before {display:none;} /* ●の非表示 */

.dotteBar .slick-dots li button { /* ボタンの形状 */

width:8px;

height:15px;

transform:rotate(45deg);

}

.dotteBar .slick-dots li button {background:#cccccc;} /* ● DFの色 */

.dotteBar .slick-dots li.slick-active button {background:#000000;} /* ● active色 */

/* ====================================================

　センター配置：画面幅に応じて左右が見える。

　　　：767以下でレスポンシブ対応（1枚表示）

==================================================== */

@media print, screen and (min-width: 768px) {

.centerRes.slickSlider .slick-slide{

width:400px !important; /* ※PCの時の画像サイズ指定 */

}

Source

Share this:

Like this: