スライダーってこんな簡単に作れるの知らなかった

Advent Calendar 2021, CSS, HTML, JavaScript, jQuery

この記事は最終更新日から1年以上が経過しています。

この記事はレコチョク Advent Calendar 2021の12日目の記事となります。

自己紹介

みなさんこんにちは、入社一年目の山岸世良です。やませらって呼んでください。
最近は採用サイトの改修やアラカルト3サービスの対応などを行っており、HTML/CSS/JavaScriptをメインで触っています。

自分の担当サービスです。よかったらチェックしてください。
採用サイト
レコチョク
dミュージック powered by レコチョク
Music Store powered by レコチョク

レコチョクが音楽業界の会社なので、少し好きなバンドや音楽遍歴について語ろうと思います。
中2あたりからバンド沼にハマり、YUIとPerfume大好きマンからバンドキッズになりました。
好きなジャンルはメロコア、青春パンク、オルタナなどでHi-STANDARDやteto、NUMBER GIRL、ゆれるをよく聞いています。最近は回り回ってandymoriがマイブームでキてます。

今回は業務をしているうえでスライダーってこんな簡単に作れたの！？と思ったslickについて紹介していきます。

slickって？

slickは、jQueryベースのスライダーを作成するプラグインです。
レスポンシブにも対応しており、機能も豊富なためスライダー界隈ではかなり有名なものになっています。

公式サイトはこちら

導入方法

slickの導入には、2つの方法があります。
1. slickをダウンロードする
2. slickをCDNで読み込む

1. slickをダウンロードする

  1. 公式サイトの「Go get it」からZIPファイルをダウンロードする。
  2. 解凍したら、任意の場所にCSSファイル(slick.cssとslick-theme.css)とJavaScript(slick.min.js)ファイルを置く。
  3. 配置したファイルのパスをhead内に記入する。
  4. 終わり！簡単！

※jQueryベースのプラグインのため別でjQuery(バージョン1.7以上)も用意してください。
参考: https://kenwheeler.github.io/slick/#getting-started

2. slickをCDNで読み込む

  1. head内に以下のコードを記載
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  1. 終わり！簡単！

公式サイトではjsDelivrというCDNが紹介されています。

基本的な使い方

HTML

  • スライダーは <ul>、 <li> タグを用いて作成する
  • <ul> に任意のクラス名でクラスを付与する(今回は .slider)
  • その子要素である <li> に表示したい画像を設置する
<ul class="slider">
    <li><img src="sample01.jpg"></li>
    <li><img src="sample02.jpg"></li>
    <li><img src="sample03.jpg"></li>
    <li><img src="sample04.jpg"></li>
</ul>

CSS

デザイン面の設定をします。今回は例としてスライダーの表示領域、余白、画像サイズ、矢印の色を変更したコードを記載します。
.slick-prev:beforeと .slick-next:beforeはslick-theme.cssにデフォルトで記載があるクラスで、矢印にかかるクラスになります。
.slider {
    margin: 0 auto;
    width: 80%;
}
.slider img {
    height: auto;
    width: 100%;
}
.slick-prev:before,
.slick-next:before {
    color: #000;
}

jQuery

基本的なスライダーならこれだけです。この下に色々なオプション(後述)を足していきます。
$('.slider').slick({
    // オプションを記述
});

このコードを動かすと以下のようなスライダーができあがります。

オプション

スライダーにつけられるオプションは多くの種類があります。その中で自分が今担当しているサービスで使用しているものを紹介します。

オプション 機能 初期値
adaptiveHeight スライドの高さの自動調整 false
autoplay 自動再生 false
autoplaySpeed 自動再生速度 3000（ミリ秒）
infinite スライドのループ true
arrows 前・次の矢印表示 true
prevArrow 前矢印のカスタマイズ '<button type=”button” class=”slick-prev”>Previous</button>'
nextArrow 次矢印のカスタマイズ '<button type=”button” class=”slick-next”>Next</button>'
centerMode スライドを中心に表示して、部分的に前後のスライドが見えるように設定 false
dots ドットインジケーターの表示 false
fade スライドの切替えをスライドからフェードに変更 false
vertical 縦方向にスライド false

他にもたくさんあるため、気になる方は公式サイトをご覧ください。

実例

自分が今メインで担当している採用サイトのスライダーを紹介します。
採用サイトでは、あまり装飾をせずシンプルなスライダーにしています。
※実際のサイトではスライダー上にテキストを載せています

HTML
<ul class="slider">
    <li><img src="sample01.jpg"></li>
    <li><img src="sample02.jpg"></li>
    <li><img src="sample03.jpg"></li>
</ul>

CSS
.slider {
    margin-bottom: 0;
    padding-left: 0;
}
.slider img {
    width: 100%;
    height: 100%;
}

jQuery
$('.slider').slick({
    autoplay: true, // 自動再生オン
    speed: 1000, // 画像切り替え速度
    fade: true, // フェードで画像が切り替わる
});

採用-2021-12-09-15.48.36.gif

あとがき

今回はスライダーを簡単に作れるプラグイン「slick」を紹介しました。
自分自身、大学時代にCSSのみでスライダーを作成して辛い思いをした経験もあったためこれを知ったときは衝撃でした。
誰かのお役に立てればと思います。

明日のレコチョク Advent Calendar 2021は13日目「異常検知手法を用いたバズり検知」です。お楽しみに！

Advent Calendar 2021, CSS, HTML, JavaScript, jQuery