・slickって背景画像でも実装できるの？
こんな疑問にお答えします。
実はslickは背景画像を利用しても実装することが可能です。
background-imageを使う感じですね。
この方法なら、全画面表示してフェードするスライドショーも簡単にでできちゃいます。
すぐにできるよ！
ということで、この記事では「slickで背景画像を使ったスライドショー」について解説していきます！
・slickで背景画像を使ったスライドショー
slickの使い方については下記をどうぞ。
【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】 目次
【簡単】slickで背景画像を使ったスライドショー【全画面表示】
背景画像を使ったslickのスライドショーがこちら↓
See the Pen slick無限ループ by jito-coder (@jito-coder) on CodePen.
全画面表示でフェードするようにスライドショーができていますよね。
これ背景画像で実装しております。
<div class="slick">
<div class="slick__bg slick__bg01"></div>
<div class="slick__bg slick__bg02"></div>
<div class="slick__bg slick__bg03"></div>
<div class="slick__bg slick__bg04"></div>
</div>.slick__bg {
padding-bottom: 16.5%;
background-size: cover;
background-repeat: no-repeat;
}
.slick__bg01 {
background-image: url(https://jito-site.com/wp-content/uploads/2023/01/1.png);
}
.slick__bg02 {
background-image: url(https://jito-site.com/wp-content/uploads/2023/01/2.png);
}
.slick__bg03 {
background-image: url(https://jito-site.com/wp-content/uploads/2023/01/3.png);
}
.slick__bg04 {
background-image: url(https://jito-site.com/wp-content/uploads/2023/01/4.png);
}$(function() {
$('.slick').slick({
fade: true,
autoplay: true,
speed: 1500,
autoplaySpeed : 2000,
pauseOnFocus: false,
pauseOnHover: false,
arrows: false,
})
});背景画像を使ったslickの作成方法の手順がこちら↓
- 背景画像用のdivタグを作成
- 背景画像をCSSで記述して反映
- slickのオプションを利用して実装
順に見ていきましょう！
まずはHTMLの組み立てです。
slickを指定する親要素divタグと、背景画像を指定するための複数の子要素divタグを作成しましょう。
<div class="slick">
<div class="slick__bg slick__bg01"></div>
<div class="slick__bg slick__bg02"></div>
<div class="slick__bg slick__bg03"></div>
<div class="slick__bg slick__bg04"></div>
</div>「slick__bg01」「slick__bg02」「slick__bg03」「slick__bg04」部分に対して、それぞれの背景画像を指定してスライドショーを作るといった感じです。
スライドさせる画像枚数分、子要素divタグを作成するよ！
次に先ほど組み立てたHTMLに対して、CSSを記述し背景画像を反映します。
// 共通クラス
.slick__bg {
padding-bottom: 16.5%;
background-size: cover;
background-repeat: no-repeat;
}// それぞれの背景画像を個別に指定していく
.slick__bg01 {
background-image: url();
}今回はpadding-bottomを使って反映しましたが、heightを使っても反映可能です。
この16.5%に関しては画像の比率のため、使用する画像によって変更しましょう。
または固定値を使う場合「～px」でも良いかと思います。
あとはslickの指定をするだけ。
$(function() {
$('.slick').slick({
// フェードで表示
fade: true,
// 自動再生
autoplay: true,
// スライド速度
speed: 1500,
// 画像切り替え間隔
autoplaySpeed : 2000,
// フォーカス当てた時の一時停止不可
pauseOnFocus: false,
// ホバーした時の一時停止不可
pauseOnHover: false,
// 矢印なしに
arrows: false,
})
});オプションについては案件の見せ方ごとに変わります。
ただ背景画像で画面一杯に表示するなら、フェードを使ってスライドショーを使うことが多いかと。
ちなみに背景画像で実装しても、ドットを利用することは可能です！
以上！これだけで背景画像を使ったslickの表示が実装できちゃいます。
簡単に画面一杯のスライドショーが作れるので個人的にオススメ！
【解説】slickのオプション一覧【カスタマイズまとめ】 
【最新】slickのスライダー実装サンプル25選【コピペOK】 【簡単】slickで背景画像を使ったスライドショー【全画面表示】：まとめ
- 背景画像用のdivタグを作成
- 背景画像をCSSで記述して反映
- slickのオプションを利用して実装
背景画像でのslickの実装方法も覚えておこう！
