jQuery 矢印付き画像のスライドショー&スライダーをslickで作る

画像のスライダー、スライドショーをjQueryのSlickを使用して実装します。

前提

デモでは下記のCSSとJavascriptファイルを読み込んでいます。

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!-- Javasript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

通常スライダー

See the Pen
slick – autoplay
by kura (@kuranopen)
on CodePen.

自動でスライドするスライダーです。

HTML

<div class="slider">
  <div class="slide" style="background-image: url(https://picsum.photos/id/237/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/236/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/235/960/540);"></div>
</div>

CSS

.slider {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 500px; /* 高さ */
}
.slider .slide {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.slider > .slick-list,
.slider > .slick-list > .slick-track,
.slider > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

Javscript

$('.slider').slick({
  arrows: false,
  autoplay: true, //自動再生ON
  autoplaySpeed: 2000, //切り替え時間
});

スライダー矢印あり&ドットあり

See the Pen
slick – autoplay
by kura (@kuranopen)
on CodePen.

矢印とドット付きのスライダーです。

HTML

<div class="slider">
  <div class="slide" style="background-image: url(https://picsum.photos/id/237/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/236/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/235/960/540);"></div>
</div>

CSS

.slider {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 500px; /* 高さ */
}
.slider .slide {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.slick-prev:before,
.slick-next:before {
  font-size: 32px;
}
.slick-prev {
  z-index: 1;
  left: 50px;
}
.slick-next {
  z-index: 1;
  right: 50px;
}
.slick-dots {
  bottom: 20px;
}
.slick-dots li button::before {
  color: #fff;
}
.slider > .slick-list,
.slider > .slick-list > .slick-track,
.slider > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

Javscript

$('.slider').slick({
  autoplay: true, //自動再生ON
  autoplaySpeed: 2000, //切り替え時間
  fade: true, //フェードON
  speed: 2000,  //フェードスピード
  dots: true,
});

See the Pen
slick – autoplay
by kura (@kuranopen)
on CodePen.

画像がリンクできるスライダーです。

HTML

<div class="slider">
  <div class="slide" style="background-image: url(https://picsum.photos/id/237/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/236/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/235/960/540);"></div>
</div>

CSS

.slider {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 500px; /* 高さ */
}
.slider .slide {
  display: block;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s;
}
.slider .slide:hover {
  opacity: 0.7 !important;
}
.slick-prev:before,
.slick-next:before {
  font-size: 32px;
}
.slick-prev {
  z-index: 1;
  left: 50px;
}
.slick-next {
  z-index: 1;
  right: 50px;
}
.slick-dots {
  bottom: 20px;
}
.slick-dots li button::before {
  color: #fff;
}
.slider > .slick-list,
.slider > .slick-list > .slick-track,
.slider > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

Javscript

$('.slider').slick({
  autoplay: true, //自動再生ON
  autoplaySpeed: 2000, //切り替え時間
  fade: true, //フェードON
  speed: 2000,  //フェードスピード
  dots: true,
});

slick タイプ別サンプル

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。