こんにちは！
前回はCSSで作成するスライドショーについてお話ししましたね。
今日は、jQueryでのスライドショーをやってみますよ！
「Slick」という超便利なプラグインを使用していきます。
プラグインと聞いてピンと来ない方もいるかもしれませんが、テンプレートのようなものです。
動きだったり、装飾もテンプレートになっており、簡単にスライドショーを作ることができます。
今日は、画像が左右に移動するようなスライドショーです。
これ以降は、スライダー、と呼びますね！
サムネイル画像もスライダーに
今回は超便利なプラグインを利用するので、
スライダーを２種類
同じ画面上に表示させてみようと思います！
やりたいことは大きく、以下の3つです。
- スライダーの下にサムネイル画像を表示させる
- サムネイル画像もスライダーにする
- メインのスライダーと、サムネイルのスライダーは連動して動く
デモサイトも作成したので、実際どのような動きをするかご覧くださいね。
早速やってみよう
解説していきますので、デモサイトを確認しながら一緒にやってみましょう！
必要なファイルをダウンロードしよう
Slickのサイトを開き、必要なファイルをダウンロードします。
「get it now」「Download Now」の順番にクリックしてください。
zipファイルがダウンロードされますので、解凍してください。
解凍すると、「slick」フォルダがありますので、その中から以下使用していきます。
- 「fonts」フォルダ（中のフォントファイル全て）
- slick-theme.css
- slick.css
- slick.js
（私は上記のファイルだけ使用していますが、もちろん他のファイルも利用できます。）
これらのファイルを、index.htmlと同じ階層に保存します。
ファイルの種類ごとにフォルダ分けした方が綺麗かもしれませんね。
今回はチュートリアルなのでこのままいきます。
赤くハイライトしたファイルが、ダウンロードしてきたもの、それ以外は自分で用意します。
スライダー部分のHTML
今回のチュートリアルでは、スライダーにする画像を6枚用意しています。
スライダー部分のHTMLは以下です。
<div class="slider-for">
<img src="slick1.jpg" alt="スライド1">
<img src="slick2.jpg" alt="スライド2">
<img src="slick3.jpg" alt="スライド3">
<img src="slick4.jpg" alt="スライド4">
<img src="slick5.jpg" alt="スライド5">
<img src="slick6.jpg" alt="スライド6">
</div>
<div class="slider-nav">
<p><img src="slick1.jpg" alt="スライド1"></p>
<p><img src="slick2.jpg" alt="スライド2"></p>
<p><img src="slick3.jpg" alt="スライド3"></p>
<p><img src="slick4.jpg" alt="スライド4"></p>
<p><img src="slick5.jpg" alt="スライド5"></p>
<p><img src="slick6.jpg" alt="スライド6"></p>
</div>スライダーを２種類表示させるため、2つの「div」タグがあります。
メインのスライダーは、
slider-for
サムネイルのスライダーは、
slider-nav
とクラス名を分けています。
cssとjQueryの呼び出しも忘れずに。
headタグに以下記載します。
<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="slick.js"></script>jQueryの利用方法について細かく説明はしていませんが、ダウンロードしてきた slick.js だけでは動きません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>↑↑
GoogleAPIから呼び込んでいますが、ダウンロードして利用するすることもできます。
これで下準備は完了です。
jQuery オプションの記述
最後に、スライダーにする２箇所に、slickを適用していきます。
<script>
$(function(){
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
centerMode: true,
pauseOnFocus: false,
focusOnSelect: true,
asNavFor: '.slider-for'
});
});
</script>$(‘.slider-for’).slick・・・・・
$(‘.slider-nav’).slick・・・・・
「slider-for」「slider-nav」の２箇所がスライダーになるよ！
という記述ですね。
以上で完成です！
オプションについて少しだけ。
asNavFor: '.slider-nav'asNavFor: '.slider-for'asNavForで、ナビゲーションとなるスライダーを指定します。
つまり、2つのスライダーを連携させるということです！
試しに、サムネイルのスライダーの中から、どれか画像をクリックしてみてください。
メインのスライダーも、サムネイルのスライダーの動きと連動するはずです。
その他のオプションについては、後日書けたら記載しますね。
slickのサイトには、「setting」に記載されていますので、ご確認ください。
最後に
jQueryが初めての方には難しかったかもしれません。
後日、jQueryの使い方についてもブログにしたいなと考えてます。
slickでは、今回行ったスライダー以外にもいろいろなオプションがあり、違う動きをするものも作れます。
slickのサイトの「demos」でスライダーのデモが、「usage」で使用方法も確認できます。
英語での記載ですが、説明文はシンプルで短く、デモを見ながらコピペで真似できるようになっています。
他のスライダーについてもチュートリアルのご要望があれば、やってみようかな！
ご意見あれば、是非コメントくださいね^^
ではでは〜〜♪
