【JavaScript】slickを使ったスライドショー(jQueryのプラグイン)

2023年8月27日

この記事では、jQueryのプラグイン『slick』を使ってスライドショーを実装するプログラミングコードを解説していきます。

完成形

まずは完成形を見ていきます。

３枚の画像がslickで切り替わっています。

See the Pen js-10 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

まずHTMLのコーディングをしていきます。今回はJavaScriptのライブラリ『jQuery』、jQueryのプラグイン『slick』を使用していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>slick</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="css/style.css">
</head>
<body>

<ul class="slide-items">
  <li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" alt=""></li>
  <li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image2.jpg" alt=""></li>
  <li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image3.jpg" alt=""></li>
</ul>

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="main.js"></script>
</body>
</html>

<!DOCTYPE html>: HTML5のドキュメントタイプ宣言です。
<html lang="ja">: HTMLのルート要素で、この文書が日本語であることを示しています。
<head>セクション: ドキュメントのメタ情報やスタイルシート、スクリプトファイルなどを指定します。
- <meta charset="UTF-8">: 文字エンコーディングをUTF-8に指定します。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポートの設定を行います。
- <title>slick</title>: ページのタイトルを指定します。
- スライドショーのためのCSSファイルを読み込みます。
<body>セクション: 実際のコンテンツを含む部分です。
- <ul class="slide-items">: スライドのリストを定義します。各スライドは<li>内に<img>タグを使用して表示されます。
JavaScriptの読み込み:
- jquery-3.7.0.min.js: jQueryライブラリを読み込みます。SlickはjQueryに依存しているため、jQueryを事前に読み込む必要があります。
- slick/slick.min.js: Slickライブラリのメインスクリプトを読み込みます。これにより、スライドショーの機能が利用可能になります。
- main.js: カスタムのJavaScriptコードを読み込みます。スライドショーの初期化やカスタマイズなどがここで行われます。

CSSコーディング

次にCSSのコーディングをしていきます。

@charset "utf-8";

ul {
  padding: 0;
}

img {
  max-width: 100%;
}

.slide-items {
  width: 500px;
  margin: 0 auto;
}

@media screen and (max-width: 500px) {
  .slide-items {
    width: 100%;
  }
}

@charset "utf-8";: 文字エンコーディングをUTF-8に設定しています。
ul { padding: 0; }: リスト（<ul>要素）の内側の余白（padding）を0に設定しています。通常、ブラウザはデフォルトの余白を持っていますが、ここでは余白を取り除いています。
img { max-width: 100%; }: すべての画像（<img>要素）の最大幅を親要素に対して100%に設定しています。これにより、画像が親要素の幅に合わせて自動的に縮小されます。
.slide-items { width: 500px; margin: 0 auto; }: .slide-items クラスにスタイルを適用しています。このクラスはスライドショーのリストを表しています。幅を500pxに設定し、左右に自動的な余白を設定してセンタリングしています。
メディアクエリ: 画面幅が500px以下の場合のスタイルを定義しています。これにより、スライドショーの幅が画面に収まるように変更されます。
- .slide-items { width: 100%; }: スライドショーの幅を100%に設定して、画面幅に合わせて自動的に伸縮するようになります。

JavaScriptコーディング

最後にJavaScriptのコーディングをして完成です。

$(function(){
  $('.slide-items').slick({
    autoplay:true,         // 自動再生を有効にする
    dots:true,             // ドットナビゲーションを表示
    arrows:false,          // 矢印ナビゲーションを非表示
    fade:false,            // フェードアニメーションを無効にする
    speed:1000,            // スライドの切り替え速度（ミリ秒）
    autoplaySpeed:3000,    // 自動再生の速度（ミリ秒）
    slidesToShow:1,        // 一度に表示するスライド数
    slidesToScroll:1,      // 一度にスクロールするスライド数
    infinite:true          // 無限ループを有効にする
  });
});

$(function(){...});: これはドキュメントが読み込まれた後に実行される関数を表します。これはjQueryの省略記法で、$(document).ready(function(){...}); と同じ意味です。つまり、ドキュメントの読み込みが完了したら内部のコードが実行されます。
$('.slide-items'): これは、クラス名が slide-items である要素を選択しています。Slickライブラリを使用してスライドショーを実現するため、スライドのコンテナ要素を選択しています。
.slick({...});: .slide-items 要素に対して、Slickライブラリの初期化オプションを指定しています。中括弧 {...} 内にオプションが続きます。Slickライブラリは、このオプションを使用してスライドショーの動作や表示に関する設定を行います。

autoplay: true: 自動再生を有効にします。
dots: true: ドットナビゲーションを表示します。ドットはスライドのページネーションを示します。
arrows: false: 矢印ナビゲーションを非表示にします。
fade: false: フェードアニメーションを無効にします。スライド切り替えのアニメーションがフェードではなくスライドとなります。
speed: 1000: スライドの切り替え速度をミリ秒単位で設定します。
autoplaySpeed: 3000: 自動再生の速度をミリ秒単位で設定します。
slidesToShow: 1: 一度に表示するスライドの数を指定します。
slidesToScroll: 1: 一度にスクロールするスライドの数を指定します。
infinite: true: 無限ループを有効にします。最後のスライドまでスクロールすると最初のスライドに戻ります。