スライドショープラグイン「Slick Slider」の設置方法

１．デモ

Demo

２．準備

スライドショーで表示するための画像を３枚ほど用意しておきましょう。
各画像は、全く同じサイズで用意しておくとデザインの形が崩れずよいかと思います。

２．設置

手順１．スクリプト読み込みコードの記述

以下のコードを「slick slider」を利用するページのタグ内にコピペで記述してください。
※ネット上にあるファイルを読み込むので、どのようなフォルダ構成でもコピペで確実に動きます。

(1) CSSファイルを読み込みます。

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

(2) jQueryを読み込みます。

※すでにjQueryを読み込み済みの場合には不要です

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

(3) JSファイルを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

(4) スライドショー設定用のJSを記述します。

<script>
  $(document).ready(function(){
    $('.slider').slick({
      autoplay: true,
    })
  })
</script> 

手順２

スライドショーを設置したい場所に以下のコードを記述し、<img>タグ部分のみ適宜差し替えて下さい。

<div class="slider">
 <div><img src="images/pic1.jpg"></div>
 <div><img src="images/pic2.jpg"></div>
 <div><img src="images/pic3.jpg"></div>
 <div><img src="images/pic4.jpg"></div>
</div>

以上です。

３．オプション

準備中