【実装編】jQueryでスライダーを作ってみよう

よくホームページで目にするスライダーですが、難しそうと思ったことありませんか？

スライダーの実装にはいくつか方法がありますが、中でも手軽で簡単なjQueryのslickを使用した方法を解説していきます。

ぜひ、最後まで見ていってください！

jQueryのプラグイン「slick」とは？

slickとはスライダーを作成するためのjQueryのプラグインです。

初心者から上級者まで幅広く使われており、カスタマイズしやすく、レスポンシブにも対応していることが人気の理由だと言えます。

slickを使ってスライダーを実装してみよう！

スライダーの実装には二つの方法があります。

公式サイトからファイルをダウンロード

こちらから公式サイトにアクセスします。

「get it now」をクリックして「Download Now」からダウンロードしてください。

Zipファイルを解凍してファイルを作成しているサイトのフォルダ内に配置してHTMLで読み込みます。

必要なファイルは以下になります。

上記に加えてjQueryも読み込みます。

jQuery→slick→JavaScriptの順で読み込んでください。

<!-- css -->
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<link rel="stylesheet" href="style.css">
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>
<script src="main.js"></script>

CDNを読み込む

CDNは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略で、ファイルをダウンロードせずに、外部ファイルを直接読み込む方法です。

CDNを読み込む場合も公式サイトからダウンロードしたファイルを読み込む場合と同じでjQueryのファイル→slickのファイル→JavaScriptのファイルの順で読み込みます。

<!-- css -->
 <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://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
 <link rel="stylesheet" href="style.css">
<!-- js -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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>

実装

See the Pen スライダー by 株式会社iris (@gxzlclhr-the-bashful) on CodePen.

基本的な書き方は以下になります。

//HTML
<div class="slider">
    <div><img src="〇〇"></div>
    <div><img src="〇〇"></div>
    <div><img src="〇〇"></div>
</div>

使用するタグはdivタグでもulタグ、liタグでも可能です。

重要なポイントは、スライドさせたい画像を並べて、それを囲っているタグにクラスを付与し、そのクラスをJavaScriptで呼び出すことです。

//CSS
.slider {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  object-fit: cover;
}

//JavaScript
$(".slider").slick();

カスタマイズ方法

スライダーのカスタマイズにはcssに記述するものとJavaScriptに記述するものがあり、かなり種類があるので、今回はよく使用するものをご紹介します。

slickのオプション

JavaScriptの記述例は以下です。

$(function(){
  $('.slider').slick({
    dots: true,
    autoPlay: true,
    slideToShow: 3,
  })
})

オプションはカンマ(,)で区切ります。

オプション例

	オプション名	値
スライダーの下にドット	dots	true/false
自動再生	autoplay	true/false
一度に表示するスライドの枚数	slideToShow	1
一度にスライドするスライドの枚数	slideToScroll	1
左右のスライド切り替えの矢印	arrows	true/false
スライド切り替えの時にフェードイン、フェードアウトする	fade	true/false
スライドを自動で切り替える速さ	speed	5000

See the Pen スライダー | ドット有り by 株式会社iris (@gxzlclhr-the-bashful) on CodePen.

CSSでカスタマイズ

CSSでスタイルを変更してドットの色や形を変えたり、矢印の形を変えたりすることが可能です。

今回は矢印のカスタマイズの仕方をご紹介します。

矢印をslickで表示させると、クラス名はslick-prevとslick-nextとなり、デフォルトのcss(slick-theme.css)のスタイルが適用されます。

.slick-prev:before,
.slick-next:before{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

矢印の色を変更してみます。

.slick-prev::before,
.slick-next::before{
  color:#a43036;
}

矢印のサイズを変更する時はfont-sizeを使用します。

.slick-prev::before,
.slick-next::before{
  color:#a43036;
  font-size: 35px;
}

矢印の位置はslick-prevとslick-nextで調整します。

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

See the Pen Untitled by 株式会社iris (@gxzlclhr-the-bashful) on CodePen.

まとめ

今回はjQueryのプラグインslickを使用してスライダーを実装する方法を解説してきました。

いかがでしたでしょうか？

jQueryには便利なプラグインがたくさんあるので、上手に使いこなしていきましょう。

別投稿ではJavaScriptやWordPressについても解説していますので、ぜひチェックしてみてください！