COLUMN コラム
2021.10.11
画像スライダープラグイン「slick」の使い方
Webサイト制作においてスライド表示は欠かせないと言っても過言ではありません。
例えばメインビジュアルやバナーリンクをスライド表示にすることは良くありますよね。
そんなときに便利なのが「slick」というプラグインです。
導入方法や使い方もとても簡単なので、今回はスライダープラグイン「slick」をご紹介します。
目次
1. slickとは
2. slickの使い方 ~導入~
3. スライダーの作成
3-1. 完成サンプル
3-2. htmlを記述する
3-3. cssを記述する
3-4. JQueryを記述する
4. カスタマイズ方法①
4-1. 完成サンプル
4-2. cssを記述する
4-3. JQueryを記述する
5. カスタマイズ方法②
5-1. 完成サンプル
5-2. htmlを記述する
5-3. cssを記述する
5-4. JQueryを記述する
おわりに
1. slickとは
冒頭でも説明した通り、スライダーを作成するプラグインです。
公式HPはこちら
2. slickの使い方 ~導入~
2-1. slickをダウンロードする
公式HPより「get it now」をクリックし、zipファイルをダウンロードします。
ダウンロードしたファイルの内、使用するのは下記の2つです。
・slick > 「slick.css」
・slick > 「slick.min.js」
上記２つをcssフォルダ、jsフォルダに格納します。
2-2. htmlに記述する
htmlの<head>内に下記記述します。
slickはJQueryで動いているので、JQueryのCDNも忘れずに追記しましょう。
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/slick.min.js"></script>3. スライダーの作成
3-1. 完成サンプル
5枚の画像を使ってスライダーを作成しています。
3-2. htmlを記述する
<ul class="slick">
<li><img alt="画像1" src="img/img1.jpg" /></li>
<li><img alt="画像2" src="img/img2.jpg" /></li>
<li><img alt="画像3" src="img/img3.jpg" /></li>
<li><img alt="画像4" src="img/img4.jpg" /></li>
<li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>3-2. cssを記述する
デザインによってcssは変更して下さい。
.slick {
width: 40%;
margin: auto;
}
.slick li img {
width: 100%;
}3-2. JQueryを記述する
$(function() {
$('.slick').slick({
autoplay : true,autoplaySpeed : 1000,
dots: false,
arrows:false
});
});4. カスタマイズ方法①
4-1. 完成サンプル
左右にある画像を少し見えるように作成しています。
4-2. cssを記述する
.slick {
width: 100%;
margin: auto;
}
.slick img{
margin: auto;
}4-3. JQueryを記述する
$(function() {
$('.slick').slick({
autoplay : true,
autoplaySpeed : 1000,
dots: false,
arrows:false,
centerMode: true,
centerPadding: '25%'
});
});5. カスタマイズ方法②
5-1. 完成サンプル
サムネイル付きのスライドショーを作成しています。
5-2. htmlを記述する
<ul class="slick">
<li><img alt="画像1" src="img/img1.jpg" /></li>
<li><img alt="画像2" src="img/img2.jpg" /></li>
<li><img alt="画像3" src="img/img3.jpg" /></li>
<li><img alt="画像4" src="img/img4.jpg" /></li>
<li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>
<ul class="thumbnail">
<li><img alt="画像1" src="img/img1.jpg" /></li>
<li><img alt="画像2" src="img/img2.jpg" /></li>
<li><img alt="画像3" src="img/img3.jpg" /></li>
<li><img alt="画像4" src="img/img4.jpg" /></li>
<li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>5-3. cssを記述する
.slick {
width:100%;
margin: 0 auto 20px;
}
.slick li img{
width:100%;
}
.thumbnail {
width:100%;
margin:auto;
}
.thumbnail li img{
margin:auto;
}5-4. JQueryを記述する
$(function() {
$('.slick').slick({
asNavFor:'.thumbnail',
slidesToShow:1,
arrows: false,
autoplay : true,
autoplaySpeed : 1000
});
});
$('.thumbnail').slick({
asNavFor:'.slick',
focusOnSelect: true,
arrows: false,
centerMode: true,
centerPadding: '25%'
});
});おわりに
今回は画像のスライドショー作成に便利な「slick」を紹介しました。
複数の画像を使用したいときに画像を動かせるようになると少しリッチなサイトが作成できます。
手軽に導入できるので、ぜひWebサイト制作にお役立ちいただければ幸いです。
弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。