slickカスタマイズ
オプションが多く汎用性の高いslidk-Sliderですが、自社の制作時に使いやすいよう、もう少し踏み込んで調整してみました。 まずは【デモ】 ベースとなる「slick」はここからダウンロードできます。 リセットCSS「base.css」はこちら。 左右のボタン、黒丸ボタンには「Fontawesome」を使っています。
Source
HTML
<script src="/assets/lib/jquery/core/jquery-2.2.4.min.js"></script>
<script src="/assets/lib/jquery/slick/slick.min.js"></script>
js
//////////////////////////////////////////////
//
// 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,
});
}
css
/* ######################################################################################
スライダー：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の時の画像サイズ指定 */
}
}
