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,
});
