スライダー「slick」の使い方

スライダー slick

jsでスライダーを設置するならjQueryのプラグイン「slick」がおすすめです。

導入

必要なファイルをhead内に読み込みます。URLはパスに合わせて書き換えます。

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

その他、jQueryも忘れずに読み込みます。
（効かない場合、scriptをbodyの閉じタグの直前に記述することを試してみてください）

画像を設置

スライダー表示位置にスライドさせたい画像を設置します。

<ul class="slick">
<li><img src="img/slide001.jpg" alt="" /></li>
<li><img src="img/slide002.jpg" alt="" /></li>
<li><img src="img/slide003.jpg" alt="" /></li>
</ul>

</ul>

スライダーを動かすスクリプトを設置

カスタマイズが可能です。

<script>
$('.slick').slick({ //カッコ内には画像を囲んだ要素のクラス名（またはid名）を入れます。
    dots: true, //インジケーター表示
    autoplay: true, //自動再生
    autoplaySpeed:6000,//再生の速さ
    arrows: false, //矢印
    fade: false, //フェード

  });
</script>

$('.slick').slick({ //カッコ内には画像を囲んだ要素のクラス名（またはid名）を入れます。

dots: true, //インジケーター表示

autoplay: true, //自動再生

autoplaySpeed:6000,//再生の速さ

arrows: false, //矢印

fade: false, //フェード

});

</script>

スタイルの調整

cssでスタイルを整えます。