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

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

Slickの公式サイト

Slickスライダー導入手順

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

手順概要

  1. Slickのサイトでダウンロード(サイト右上の「Get it down」ボタン)
  2. Webサイトのドキュメントルートに「slick」フォルダ作成。
  3. そこに①slick.min.js、②slick.css、③slick-theme.css、④ajax-loader.gif、⑤fontsフォルダの5組をUP
  4. サイト<head>に①jQuery、②slick.min.js、③slick.css、④slick-theme.cssの読み込み(後述)。
  5. 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>
導入終了

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

参考サイト

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
主に広告デザインを中心に、企画・出版・編集・印刷、Web制作をしていますが、最近は記事そのものや、ブログ、動画などのコンテンツ配信にも力をいれています。インターネットの時代はコンテンツプロバイダになるのがとても重要。自分自身もランニングアートなど、自分自身がコンテンツになるように心がけています。