スライダー slick
jsでスライダーを設置するならjQueryのプラグイン「slick」がおすすめです。
導入
必要なファイルをhead内に読み込みます。URLはパスに合わせて書き換えます。
|
1 2 3 |
<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の閉じタグの直前に記述することを試してみてください）
画像を設置
スライダー表示位置にスライドさせたい画像を設置します。
|
1 2 3 4 5 |
<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> |
スライダーを動かすスクリプトを設置
カスタマイズが可能です。
|
1 2 3 4 5 6 7 8 9 |
<script> $('.slick').slick({ //カッコ内には画像を囲んだ要素のクラス名（またはid名）を入れます。 dots: true, //インジケーター表示 autoplay: true, //自動再生 autoplaySpeed:6000,//再生の速さ arrows: false, //矢印 }); </script> |
スタイルの調整
cssでスタイルを整えます。
