簡単スライダー第2弾 〜slick編〜
ProgateでJavaScript と jQuery の基礎を一通り学びましたので、JSで動くスライダーを設置してみることにしました！ということで、今回は、「jQueryのプラグインでカーセルスライダー」に挑戦していこうと思います。(※google先生に頼りながら。)数あるjQueryプラグインの中でも、使いやすいという噂の slick を使ってみることにしました。
slick での実装概要
slick での実装手順は下記です。とても簡単に導入できるのが slick の魅力ではないでしょうか。また、有名なプラグインなので使い方は調べればすぐ出てきます。slick の公式サイトは英語ですが、日本語の解説サイトが多数あるので英語が分からない私でも大丈夫でした。
- jQuery本体を読み込む
- slick を読み込む
- ※slick公式サイト( http://kenwheeler.github.io/slick/ )
- プラグイン(slick)を適用する HTML を書く
- プラグインの起動スクリプトを書く
スライダーのjQueryプラグインで有名なのが「slick」だそうです。はじめ、CDN（コンテンツ・デリバリー・ネットワーク）で slick を読み込もうとしましたが、なぜかリンクを読み込めなかったので、今回はダウンロード式でスライダーを設置しました。
参考サイト
今回参考にさせていただいたサイト
uzurea.net -jQueryカルーセルスライダー『slick.js』設置方法と設定オプション一覧-
調べた中では、わりと最近の記事だったので参考にさせていただきました。
作成したスライダー
今回作成したスライダーはこちら
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rachicom.net</title>
<!-- slickのCSS読み込み -->
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<!-- jQueryのJS読み込み -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<!-- slickのJS読み込み -->
<script src="slick/slick.min.js"></script>
<!-- スタイル設定 -->
<style>
body {
background-color: #7dc6ba;
padding: 10px 30px 0 30px;
}
.slide-summer__list {
list-style: none;
padding: 0;
max-width: 710px;
margin: 0 auto;
}
.slide-summer__image {
width: 100%;
}
.slide-summer__item {
position: relative;
}
.slide-summer__text {
position: absolute;
right: 0px;
bottom: 10px;
left: 0px;
text-align: center;
color: white;
}
/* 画像横にある矢印ボタンの色を変更 */
.slick-prev:before {
color: black;
}
.slick-next:before {
color: black;
}
</style>
</head>
<body>
<!-- スライダー -->
<ul class="slide-summer__list slick-slider">
<li class="slide-summer__item">
<img class="slide-summer__image" alt="木漏れ日" src="slider_komorebi.jpg">
<div class="slide-summer__text">
<h5>1枚目</h5>
<p>木漏れ日</p>
</div>
</li>
<li class="slide-summer__item">
<img class="slide-summer__image" alt="ラムネ" src="slider_ramune.jpg">
<div class="slide-summer__text">
<h5>2枚目</h5>
<p>ラムネ</p>
</div>
</li>
<li class="slide-summer__item">
<img class="slide-summer__image" alt="風鈴" src="slider_fuurin.jpg">
<div class="slide-summer__text">
<h5>3枚目</h5>
<p>風鈴</p>
</div>
</li>
</ul>
<!-- スライダーを動かす＆スライダーの動きを調整 -->
<script>
$(function () {
$('.slick-slider').slick({
autoplay: true,//自動再生
autoplaySpeed: 3000,//自動再生の間隔
arrows: true,//左右のナヴィゲーションの矢印を表示
dots: true,//サムネイルのドットを表示
pauseOnHover: true//マウスオーバーで自動再生を一時停止
});
});
</script>
</body>
</html>
