slickスライダーの基本な使い方

更新：2021-11-15

企業サイトのトップページにあるような横幅いっぱいに表示されるslickスライダー（カルーセル）のサンプルコード。

まず、事前準備。 slickのCSSが2つ、JavaScriptが1つあり、自分のサイトに合わせてパスを指定する。別途jQueryが必要なので、それも指定する。 slickのバージョンは1.8.1、jQueryのバージョンは3.6.0。

CSS

<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">

JavaScript

<script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

HTML

<div id="slide-image">
<div><img src="image_01.jpg"></div>
<div><img src="image_02.jpg"></div>
<div><img src="image_03.jpg"></div>
</div>

この例では画像を3枚スライドさせる。もし画像に合わせて特定のページへリンクを張りたい場合は、それぞれAタグで囲むとよい。

基本設定

私のサイトで使っていたコードをそのまま記す。適宜自分のサイトに合わせて改造する。

まず、CSS。

width:100% で横幅いっぱいに表示。 slick-prev は左矢印、slick-next は右矢印。それらの疑似要素beforeで矢印の大きさを変更。また、矢印を内側に入れるため、それぞれ50px内側へ位置を移動させている。さらに、そのままだと画像に隠れてしまうので、z-index:1 で画像より上に表示させている。

矢印（丸）のデフォルトカラーは白だが、背景が白の場合見にくい。もし黒色に変える場合は、.slick-prev::before に color:#000 を追加する。

slick-dots はスライダー下部に表示される●ナビゲーション。サンプルでは font-size で●の大きさを少し大きくしている。

slickで使われているCSS（class名）を知りたい場合は、ブラウザの開発ツールを活用するとよい。

<style>
#slide-image {width:100%;box-sizing:border-box;}
#slide-image img {display:block;width:100%;height:min(50vw, 500px);object-fit:cover;}
.slick-prev::before, .slick-next::before {font-size:30px;}
.slick-prev {left:50px;z-index:1;}
.slick-next {right:50px;z-index:1;}
.slick-dots li button::before {font-size:10px;}
</style>

次にJavaScript。

画像を1枚ずつ表示させるため、slidesToShowとslidesToScrollは1。 autoplay（自動再生）はtrue。 autoplaySpeed（再生スピード）は、ここでは3秒（3000ミリ秒）としている。

ここではコメントアウトしているが、スライドの隣の画像が見えるようにするには、centerMode と centerPadding を指定する。 centerPaddingは両端に画像がどの程度見えているかをサイズで指定。

<script>
$('#slide-image').slick({
    slidesToShow:1,
    slidesToScroll:1,
    autoplay:true,
    autoplaySpeed:3000,
    dots:true,
    //centerMode:true,
    //centerPadding:'100px',
});
</script>

slickスライダーは企業サイトでもわりとよく使われており有名だが、CSSファイルやjQueryなどロードするファイルの数がやや多く、その分ページの表示に時間がかかる。といっても大した差はないが。個人的にはSwiperの方が気に入っている。 Bootstrapのカルーセルもバージョン5からjQueryが必要なくなった。

slickスライダーの基本な使い方

基本設定

カテゴリ