slick.jsの基本の使い方手順

1.ファイルのダウンロード

slickのページ にアクセスして、ファイルをダウンロードする。

get it now ボタンを押下で、ページの下の方に移動します。

Download Now ボタンを押下で、ファイルのダウンロードが始まります。

2.必要なファイルを任意のフォルダに設置する

• slick.css
• slick-theme.css
• slick.js

を利用します。 各ファイルは自分の制作中のファイルを設置しているフォルダの中に「css」「js」フォルダを作って移動（コピー）させます。

3-1.必要なコードを追加する（CSS設置編）

CSSを追記します。

    <title>スライドショーを作ろう</title>
    <link rel="stylesheet" href="css/slick.css"/>
    <link rel="stylesheet" href="css/slick-theme.css"/>

書くときのポイント

タイトルタグの下に「slick.css」を書いてから下に「slick-theme.css」を書き、自分が作成しているCSSファイルを設定しましょう！（CSSの設定は３つになるよ）

3-2.スライドショーにしたい内容を追加します（HTML設置編）

スライドショーを設定したいところをHTMLでを設定します。

<div class="slider">
    <div>
      <img src="img/photo01.jpg" alt="">
    </div>
    <div>
        <img src="img/photo02.jpg" alt="">
    </div>
    <div>
        <img src="img/photo03.jpg" alt="">
    </div>
  </div>

書くときのポイント

1.「class=”slider”」の大きな箱の中にスライドしたい「箱（divなど）をいれること
※「ul」「li」を使っても可。その場合は「ul」にクラス名をつけること

3-3.必要なコードを追加する（javacsript設置編）

javacsriptファイルを設定します。 ファイルの設定はからのあいだに設定します。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/slick.js"></script><script>
        $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 2000
        });
    </script>

書くときのポイント

・必ず一番下のとに書きましょう！
・$(“.slider”)は、スライドを設定したい大きな箱と同じクラス名にしましょう

自動再生とオプション設定について

自動再生と次のスライドに移動する設定は

        autoplay: true,
        autoplaySpeed: 2000

を書くと自動で再生されます。
スピードは２０００と書くと「２秒」で次のスライドに移動します。
オプションの設定などはここを確認しながらオプション設定にチャレンジしてみてください。

スライダープラグイン「Slick」便利なオプション&動きサンプル集