Membuat Carousel dengan Owl Carousel
halo teman teman Jumpa lagi di tips dan trik seputar Wesite di Source Code Aplikasi, oke kali ini saya akan menshare bagamana cara Membuat Carousel dengan Owl Carousel … seketika saja kita praktekan yah teman teman..
buka text editor kesayangan kalian dan ketikan kode HTML berikut dan beri nama dengan nama index.html
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<!-- head -->
<meta charset =utf-8>
<meta name =msapplication-tap-highlight content =no />
<meta name =viewport content =width=device-width, initial-scale=1.0 />
<meta name =description content =Basic usage demo>
<meta name =author content =David Deutsch>
<title>
Basic Demo | Owl Carousel | 2.2.1
</title>
<!-- Stylesheets -->
<link rel =stylesheet href =http://kodingku.com/owl_carousel/css/docs.theme.min.css>
<link rel =stylesheet href =http://kodingku.com/owl_carousel/css/owl.carousel.min.css>
<link rel =stylesheet href =http://kodingku.com/owl_carousel/css/owl.theme.default.min.css>
<link rel =stylesheet href =style.css>
</head>
<body>
<h2>Cool Owl Caousel</h2>
<section id =demos>
<div class =row>
<div class =large-12 columns>
<div class =owl-carousel owl-theme>
<div class =item>
<img src =http://kodingku.com/owl_carousel/images/1.png >
</div>
<div class =item>
<img src =http://kodingku.com/owl_carousel/images/2.png >
</div>
<div class =item>
<img src =http://kodingku.com/owl_carousel/images/3.png >
</div>
<div class =item>
<img src =http://kodingku.com/owl_carousel/images/4.png >
</div>
<div class =item>
<img src =http://kodingku.com/owl_carousel/images/5.png >
</div>
<div class =item>
<img src =http://kodingku.com/owl_carousel/images/6.png >
</div>
</div>
</div>
</div>
</section>
</body>
</html>
setelah itu ketikan scrpit berikut letakan sebelum tag penutup body
<script src=”js/jquery.min.js”></script>
<script src=”js/owl.carousel.js”></script>
<script>
$(document).ready(function() {
var owl = $(‘.owl-carousel’);
owl.owlCarousel({
margin: 10,
nav: true,
loop: true,
memiliki tampilan yang dinamis: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
})
</script>
lalu bikin sedikit file css berikut in i dan beri nama dengan style.css, mesti sejajar dengan file index.html yah teman teman..
style.css
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
body{
background-image: url(http://kodingku.com/owl_carousel/images/wild-sea.png);
}
h2{
font-family: 'Indie Flower', cursive;
text-align: center;
font-weight: bold;
}
.owl-theme .owl-nav [class*=owl-] {
background: #333;
}
karenanya akan tampilan nya akan seperti gambar di bawah ini teman teman
bila kita tekan tombol next atau prev karenanya gambar gambar akan bergeser sesuai tombol apa yang kita tekan teman teman..
gampang bukan pemasangan owl carousel ini teman teman …
demikian panduan Membuat Carousel dengan Owl Carousel semoga bermanfaat yah teman teman 😀 keep koding
Sumber https://kursuswebsite.org
