スライダーを作る方法がわからない
2025.04.07
スライダー（画像などが右から左にスライドするコンテンツ）を作る方法はいろいろありますが、今回はjQueryプラグイン『Slick』を使ってスライダーを実装する方法を紹介します。
① Slickの導入
まずはSlickのファイルをHTML内で読み込む必要があります。CDNを使う方法と、あらかじめファイルをダウンロードしておく方法とあります。
CDNという手法はよりお手軽ですが、若干ページの読み込み速度が遅くなる可能性があります。ただ、コーディングの練習目的であれば、CDNでかまいません。
CDNから読み込む場合（簡単）
HTMLの <head> 内、もしくは</body>のすぐ上に以下を追加します。
<!-- 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"/>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Slick本体 -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>ファイルをダウンロードする場合（任意）
jQueryのファイルをダウンロードし、任意のフォルダに配置します。今回はjsという名前のフォルダに配置する例をご紹介します。
<script src="js/jquery.min.js"></script>※もしくはjQueryのみをCDNで読み込んでも構いません。
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>以下のSlick公式サイトからダウンロードします。
ダウンロードしたフォルダ名を任意のフォルダ名（例ではslick）に変更して配置します。フォルダの中にはたくさんファイルが入っていますが、必要なのは下記の三つとfontsフォルダのみです。それ以外は消しても構いません。
その後、HTMLの<head></head>内に以下のように記述します。かならず上記のjQuery読み込みよりも下に書いてください。
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<script src="slick/slick.min.js"></script>② HTMLの準備（スライダーにしたい画像やコンテンツを記述）
スライダーにしたい要素を記述します。下の例では子要素は<div>要素になっていますが、<img>要素がむき出しでも特に問題ありません。
<div class="slider">
<div><img src="image1.jpg" alt="スライド1"></div>
<div><img src="image2.jpg" alt="スライド2"></div>
<div><img src="image3.jpg" alt="スライド3"></div>
</div>③ jQueryでSlickを有効化
<script>タグまたは外部JSファイル（script.jsなど）に記述します。
$(function() {
//.sliderの箇所は上記HTML内で付けたクラス名です
$('.slider').slick();
});これで、ひとまずSlickは動くようになるはずです。
動作しないときの確認事項
下記ご確認ください
jQueryが動かない。もしくはSlickなどのプラグインが動かない