レスポンシブな今どきの万能スライダー「Slick」を導入してみる

投稿日 2020年7月19日
著者 mojigumi
カテゴリー Web

スライダーもいろんなスクリプトが出回って、落ち着き感がでてきました。レスポンシブで、今どきっぽくて、何でも設定ができて万能。そんな万能的なスライダー「slick」を導入してみようと悪戦苦闘した記録です。ミスした部分は省略して必要な部分だけ備忘録として残しました。

Slickの公式サイト

Slickスライダー導入手順

機能が多いからか、読み込むものが多い。シンプルにしたいのだが、しかたない。

手順概要

Slickのサイトでダウンロード（サイト右上の「Get it down」ボタン）
Webサイトのドキュメントルートに「slick」フォルダ作成。
そこに①slick.min.js、②slick.css、③slick-theme.css、④ajax-loader.gif、⑤fontsフォルダの5組をUP
サイト<head>に①jQuery、②slick.min.js、③slick.css、④slick-theme.cssの読み込み（後述）。
func_slick.jsを新規作成し、スライダーclassを記述し、slickフォルダに保存（後述）。

fontsフォルダ

このフォルダはスライダーの矢印に必要なフォント。矢印をカスタマイズしたい方は不要。

サイト<head>内に読み込むコード

    <!-- slick CSS + js -->
    <link rel="stylesheet" type="text/css" href="slick/slick.css">
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="slick/func_slick.js"></script>

slickフォルダがあることを前提

上記パスはは、前述「手順概要」②で記したように、「slick」フォルダにUPされていることを前提にしています。別フォルダや別ディレクトリの場合は任意にパス変更を。

func_slick.jsにスライダーclassを記述

当サイトではスライダーclassを「.slick-slider」とした。他のclassやBootstrapと被らないように。

$(function() {
    $('.slick-slider').slick(); //スライダーのclassまたはID指定（任意）
});

スライダーHTMLを記述

やっとhtmlへの記述に入る。（classが「slick-slider」なのは前述したとおり、func_slick.jsの記述に則している）

<ul class="slick-slider">
  <li><img src="images/ph_sample_1.jpg"></li>
  <li><img src="images/ph_sample_2.jpg"></li>
  <li><img src="images/ph_sample_3.jpg"></li>
</div>

導入終了

ここまでは基本的な導入手順で、ここからは細かな設定変更などカスタマイズに入る。