[JavaScript] Slick
2020.12 |
スライドショーの「Slick」を試してみました |
デモ
Slide 1
Slide 2
Slide 3
HTML
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css"
href="slick.css"/>
<link rel="stylesheet" type="text/css"
href="slick-theme.css"/>
<script type="text/javascript"
src="slick.min.js"></script>
<div class="my_slick">
<div class="ms bg-1">Slide 1</div>
<div class="ms bg-2">Slide 2</div>
<div class="ms bg-3">Slide 3</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.my_slick').slick({
autoplay: true,
dots: true,
});
});
</script>
<style>
.my_slick {
width: 460px;
margin:0 auto;
}
.ms {
height: 260px;
}
.bg-1 { background: #f99; }
.bg-2 { background: #9f9; }
.bg-3 { background: #99f; }
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
先月の「Swiper」よりほんのちょっと手がかかったかな |
2020年 |
2020.11 [JavaScript] Swiper |