slickツールで簡単にHTMLページにスライダーを実装する方法

2023-02-192023-02-20

制作手順

STEP

フォルダーにHTMLとCSSファイルを作ります。

STEP

jquery cdn（https://releases.jquery.com/）＞一番上の新そうなバージョンの「minifid」をコピペして/bodyの前に入れる。

   <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

STEP

slick（https://kenwheeler.github.io/slick/）＞タブ（get it now）>の「You can also use slick with the jsDelivr CDN!」CSSとコピペしたものと、コピペして「slick-theme.css」にしたもの（合計２個）を自分のCSSの前に記入する。

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

STEP

両方ともhrefに「https://」を記入する。

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

STEP

同じくタブ（get it now）>の「You can also use slick with the jsDelivr CDN!」JSをコピペして/bodyの前に記入する

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

STEP

タブの（usage）＞「Set up your HTML markup.」をbodyの中に記入する。

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div

STEP

「your content」部分はスライドさせたいjpg画像を入れる

    <div class="your-class">
      <div><img src="img/188px1.jpg" alt="" /></div>
      <div><img src="img/188px2.jpg" alt="" /></div>
      <div><img src="img/188px3.jpg" alt="" /></div>
    </div>

STEP

/bodyの前に下記を記入する

  <script>
  $(function(){
      $('.your-class').slick({
});
});
  </script>

STEP

アレンジ１

下記を記入することで、読み込み時の不具合を消します

.your-class {
  visibility: hidden;
}
.your-class.slick-initialized {
  visibility: visible;
}

STEP

アレンジ２

下記を記入で画像上の矢印ボタンを調整します。（px数はその時の画面サイズで）

.slick-prev,
.slick-next {
  z-index: 10;
}

.slick-prev {
  left: 10px;
}
.slick-next {
  right: 10px;
}

STEP

アレンジ３
スライド下に枚数のドットをつけて、オートプレイの指示を記入しました。

    <script>
      $(function () {
        $(".your-class").slick({
          dots: true,
          autoplay: true,
        });
      });
    </script>

他にも色々アレンジ例もこちらに載っているよ

slick

https://kenwheeler.github.io/slick/

完成コード

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>スライドショーの練習</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
    />
    <link rel="stylesheet" href="style.css" />
    <title>スライドショーの練習</title>
  </head>
  <body>
    <div class="your-class">
      <div><img src="img/188px1.jpg" alt="" /></div>
      <div><img src="img/188px2.jpg" alt="" /></div>
      <div><img src="img/188px3.jpg" alt="" /></div>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.6.3.min.js"
      integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
      crossorigin="anonymous"
    ></script>
    <script
      type="text/javascript"
      src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
    ></script>
    <script>
      $(function () {
        $(".your-class").slick({
          dots: true,
          autoplay: true,
        });
      });
    </script>
  </body>
</html>

CSS

body {
  background-color: rgb(255, 227, 227);
}
.your-class {
  visibility: hidden;
}
.your-class.slick-initialized {
  visibility: visible;
}
.slick-prev,
.slick-next {
  z-index: 10;
}

.slick-prev {
  left: 10px;
}
.slick-next {
  right: 10px;
}