Membuat Carousel dengan Owl Carousel

halo teman teman Jumpa lagi di tips dan trik seputar Wesite di Dumetschool, oke kali ini saya akan menshare bagamana cara Membuat Carousel dengan Owl Carousel … langsung 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,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
})
</script>

lalu buat sedikit file css berikut in i dan beri nama dengan style.css, harus 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;
}

maka akan tampilan nya akan seperti gambar di bawah ini teman teman

bila kita tekan tombol next atau prev maka gambar gambar akan bergeser sesuai tombol apa yang kita tekan teman teman..

mudah bukan pemasangan owl carousel ini teman teman …

sekian tutorial Membuat Carousel dengan Owl Carousel semoga bermanfaat yah teman teman 😀 keep koding