レスポンシブ対応のスライダー「slick」を設置したい

PR　当ページのリンクには広告が含まれています。

jQueryスライダーなら「slick」

jsでスライダーを設置するならjQueryのプラグイン「slick」がおすすめ！
カスタマイズ例もネットでいろいろ紹介されていますね。
ここでは基本的な設定をご紹介します。

公式サイトはこちらです。「get it now」から必要なファイルをダウンロードできます。

導入

必要なファイルを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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>

3行目はjQueryですね。他のjsで使用していれば追加しなくてもOKです。
動かない場合はscriptをbodyの閉じタグの直前にしたり、他のjsと順番を変えて試します。

画像を設置

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

<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>

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

カスタマイズが可能です。こちらはシンプルなスライダーの一例です。

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

  });
</script>