.png)
cara membuat div slider dengan plugin slick
Kali ini kita akan membuat div slider kalu membuat image slider sudah banyak di internet nah kalo membuat div slider kaya gimana, untuk membuat div slider tidak jauh berbeda dengan membuat image slider kalau image slider yang dibuat slide nya adalah gambar, pada div slider yang dibuat slidernya div berisi paragraph dll.
Untuk membuatnya silakan anda exstrak slicknya kemudian buat file baru dan masukan kode dibawah:
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
section {
background: transparent;
}
.slider {
width: 50%;
margin: auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.sm-box {
width: 184px;
height: 200px;
background-color: rgba(0,255,0,0.5);
padding: 20px;
float: left;
display: inline-block;
margin: auto 5px;
font-size: 20px;
}
</style>
</head>
<body>
<section class="autoplay slider">
<div>
<div class="sm-box">Coba Slide 1</div>
</div>
<div>
<div class="sm-box">Coba Slide 2</div>
</div>
<div>
<div class="sm-box">Coba Slide 3</div>
</div>
<div>
<div class="sm-box">Coba Slide 4</div>
</div>
<div>
<div class="sm-box">Coba Slide 5</div>
</div>
<div>
<div class="sm-box">Coba Slide 6</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
</body>
</html>
sekianlah cara membuat div slider dengan menggunakan plugin slick. semoga bermanfaat
0 komentar :