簡単にスライダーを設置！JQueyプラグイン「slick」の使い方【jQuery】

webサイトにスライダーを設置しようとしたらJQueryプラグインを使うとかなり楽です。

私は数あるスライダープラグインの中でも「slick」を好んで使うのですが、地味にCSSの設定やらなんやらがあるので、ぺっぺっぺと簡単に設置できるように備忘録も兼ねて使い方を記事にしたいと思います。

ということで今回は「slickを使ってサイトに簡単にスライダーを設置する方法」をご紹介します。

目次非表示

slickの準備
- ダウンロードの場合
- CDNの場合
slickの設置方法
- HTML
- CSS
- script
完成！
オプションでカスタマイズ
- 画像サイズがバラバラだとどうなる？
slickは簡単で使いやすい！

目次へ

slickの準備

slickを使用するには当然本体が必要なので公式サイトにアクセスして本体をダウンロード、またはCDNリンクをコピーします。

[aside type=”warning”]JQueryは読み込んでいる前提で進めていきますので、始める前にJQueryの本体は読み込んでおいてください！[/aside]

ダウンロードの場合

公式サイトの上部にあるグローバルナビの中の「get it now」をクリック
「Download Now」をクリック
Zipファイルが保存されるので解凍
使用するものを使用するサイトのフォルダにコピー

使用するファイル

slick.min.js

slick.css

slick-theme.css

head内に読み込みの記述をします。読み込む順番はCSS→JS。

※下は例ですので保存している場所やフォルダ名はご自身のものを指定してください。（下でいう「js」の部分）

<link rel="stylesheet" type="text/css" href="js/slick.css">
<link rel="stylesheet" type="text/css" href="js/slick-theme.css">
<script type="text/javascript" src="js/slick.min.js"></script>

CDNの場合

slick用CDNのurlをこちらのサイトからコピーしてきます。

使用するファイル

slick.min.js

slick.css

slick-theme.css

head内に読み込みの記述をします。読み込む順番はCSS→JS。

コピペで行けるようにJQuery本体のCDNの記載をしました。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

slickの設置方法

準備が終わったら実際にスライダーを設置してみましょう！

HTML

「slider」というクラス名をつけたul要素の中に、画像を含んだli要素を配置します。クラス名はなんでも良しです！

公式サイトの説明では、親要素のdivの中に子要素のdivを配置していますが、ulとliを使ったほうがわかりやすい気がします。

スライド用に画像サイズは合わせて作成しておきましょう！

<ul class="slider">
    <li><img src="<!--画像URL-->"></li>
    <li><img src="<!--画像URL-->"></li>
    <li><img src="<!--画像URL-->"></li>
</ul>

CSS

bodyとul要素のmargin・paddingを0にして余白をリセットします。

※スライダーの矢印が白いため、グレーの背景を設定しています。

合わせてimgをmax-width:100%としましょう。

.sliderにmax-widthで幅をつけて、marginの設定でスライダーを真ん中に配置します。

body {
    margin: 0;
    padding: 0;
    background: #dedede;
}

ul {
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

.slider {
    max-width: 1200px;
    margin: 0 auto;
}

矢印の色を変えるには？

「.slick-prev:before」と「.slick-next:before」のcolorを指定すれば変更できます。

.slick-prev:before,
.slick-next:before {
    color:
        /*--- カラーコード ---*/
}

script

スライダーを実行するscriptを書きます。下記のコードをbodyタグの直前にコピペしましょう。

※「script.js」などの別データに記入すると管理が楽です。

<script>
    $(function() {
        $('.slider').slick({
            dots: true, //下の丸ぽっち（インジケーター）を表示 
            autoplay: true, //自動再生 
            autoplaySpeed: 5000 //自動再生の速度 
            //ここにオプションを書いていく 
        });
    });

</script>