【jQuery】『slick』を使って全画面表示のスライドショー

【jQuery】『slick』を使って全画面表示のスライドショー
きのこさん
slickを使って全画面表示のスライドショー!
きのこさん
レスポンシブを考えて『background』で対応しましょう!

1. 全画面表示、実装サンプル(background対応)

しっかりレスポンシブ対応したいので『background』で画像を設定するのが一番です。
スワイプもできるのでおすすめです。

See the Pen
【jQuery】『slick』を使って全画面表示のスライドショー(background対応)
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<div class="full">
  <div class="main01"></div>
  <div class="main02"></div>
  <div class="main03"></div>
</div>

CSS

.full div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
}
.full div.img01 {
  background-image: url(https://125naroom.com/demo/img/simple01.jpg);
}
.full div.img02 {
  background-image: url(https://125naroom.com/demo/img/simple02.jpg);
}
.full div.img03 {
  background-image: url(https://125naroom.com/demo/img/simple03.jpg);
}
.full .slick-dots {
	bottom: 4%;
	z-index: +1;
}

jQuery

$(document).on('ready', function() {
  $(".full").slick({
    arrows: false,
    dots: true,
    autoplay: true,
    autoplaySpeed: 1500,
    speed: 1500,
    fade: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
  });
});

実装デモページはこちら

2. 全画面表示、実装サンプル(background対応、aタグを使えばリンクもOK)

スワイプもできてリンクも貼れてslickさん素晴らしいの一言です。

See the Pen
【jQuery】『slick』を使って全画面表示のスライドショー(background対応、aタグを使えばリンクもOK)
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<div class="full">
  <a href="https://125naroom.com/web/3486" target="_blank" class="img01"></a>
  <a href="https://125naroom.com/web/3486" target="_blank" class="img02"></a>
  <a href="https://125naroom.com/web/3486" target="_blank" class="img03"></a>
</div>

CSS

.full a {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  text-decoration: none;
}
.full a.img01 {
  background-image: url(https://125naroom.com/demo/img/simple01.jpg);
}
.full a.img02 {
  background-image: url(https://125naroom.com/demo/img/simple02.jpg);
}
.full a.img03 {
  background-image: url(https://125naroom.com/demo/img/simple03.jpg);
}
.full .slick-dots {
	bottom: 4%;
	z-index: +1;
}

jQuery

$(document).on('ready', function() {
  $(".full").slick({
    arrows: false,
    dots: true,
    autoplay: true,
    autoplaySpeed: 1500,
    speed: 1500,
    fade: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
  });
});

実装デモページはこちら

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
やっぱり地下のパン屋さんのチーズパンが一番美味しいですー
きのこさん
同意見ですー

関連記事

【jQuery】iOS(Safari)だと100vhが少しはみ出てしまう対策

【jQuery】スライダープラグイン「slick」実装サンプル集

【jQuery】slick を使ってスライドショー(横幅いっぱい+前後のスライドを半透明にする)

【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』の実装サンプル集

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

3

/

29

2024

Googleさんの
おすすめ

3

/

29

2024

デザインの記事

であうにあう編集部 | niko and …
ケの日のケケケ
【CSS】counter-incrementを使って擬似要素をリスト化する