slick

概要

カルーセルの王道ライブラリ

具体的な使い方やデモは本家のサイトから
slick - the last carousel you'll ever need - Ken Wheeler

準備

npmからslick-carouselをインストール

javascript

import $ from 'jquery';
import 'slick-carousel';

css

@import "node_modules/slick-carousel/slick/slick.scss";
@import "node_modules/slick-carousel/slick/slick-theme.scss";

このやりかたでもcssを取得できるが、不要なコードも含まれている。gifのパスとか。それがコンソールにエラーとして出てくるのが面倒くさいので、個人的にはlibフォルダをつくって適宜必要な部分だけ読み込むようにしている。

サンプル

以下、カスタマイズしたいときのメモ

JS

スライドが切り替わる直前に、中央の両サイドのスライドを非活性化

import $ from 'jquery';
import 'slick-carousel';

export default function initCarousel() {
    $(".js-gallery-carousel").slick({
        infinite: true,
        centerMode: true,
        arrows: true,
    })
    .on("beforeChange", (event, slick, currentSlide, nextSlide) => {
        deactivate(nextSlide);
    });
    deactivate();
}

function deactivate(nextSlide) {
    const INACTIVE_CLASS = "inactive";
    $('.slick-slide').removeClass(INACTIVE_CLASS);
    const $centerSlide = nextSlide != null
        ? $(`.slick-slide[data-slick-index="${nextSlide}"]`)
        : $(".slick-current");
    $centerSlide.prev().addClass(INACTIVE_CLASS);
    $centerSlide.next().addClass(INACTIVE_CLASS);
}

瞬時に指定したスライドに移動

アニメーションを無効にするときの第三引数はtrue。無効にしたいからfalseを入れて時間を無駄にしたことがある。

$carousel.slick('slickGoTo', slideIndex, true);

CSS

outlineは消した方が美しい

.slick-slide{
	outline: none;
}

矢印の色を変える

.slick-prev:before,
.slick-next:before{
    color: skyblue;
}

矢印をオリジナルの画像にする

.slick-arrow{
	&:before{
		opacity: 0;
	}
}
.slick-next{
	background-image: url(../img/arrow_right.png);
}
.slick-prev{
	background-image: url(../img/arrow_left.png);
}

ページャの色を変える

.slick-dots li.slick-active button{
      background-color: #f00;
}

高さが変わってしまう場合

$slick-height: 90px;
$slick-width: 280px;

.multiple-items{
    width: $slick-width;
	height: $slick-height;
    margin: 0 auto;
}
.slick-list,
.slick-track{
	width: $slick-width;
	height: $slick-height;
}

参考
レスポンシブに強いカルーセルスライダーslickの使い方
【jQuery】レスポンシヴにも対応したクオリティの高いカルーセル・スライダー［slick］の使い方。
レスポンシブ対応のjQueryカルーセル 「slick」
slick.jsの使い方まとめ