Cara Membuat Slider dengan Owl Carousel
06/12/2017 Risman Hakim 25913 Website
Saat ini banyak sekali plugin-plugin dari jQuery yang bisa kita pakai untuk tampilan web baik yang gratis maupun yang berbayar, karena plugin sangat mudah sekali untuk digunakan dan kita tidak perlu lagi membuat kode-kode program dari awal, hanya saja kita perlu tahu bagaimana cara plugin diterapkan pada tampilan website. Nah, salah satu plugin yang banyak dicari adalah plugin slider. Berikut ini akan saya share plugin yang wajib kalian gunakan untuk menunjang tampilan website yakni Owl Carousel. Owl Carousel merupakan plugin jQuery berupa animasi slide berupa gambar-gambar, didalam plugin ini terdapat beberapa efek yang bisa kita gunakan, mulai dari animasi basic, auotplay, auto width dan lain sebagainya. Nah, sekarang bagaimana cara membuat atau menerapkan nya ? Berikut ini akan saya share bagaimana Cara Membuat Slider dengan Owl Carousel. Simak langkah-langkahnya berikut ini.
Langkah 1 : Cara Membuat Slider dengan Owl Carousel
Baik langsung saja, silahkan kalian download terlebih dahulu plugin jQuery Owl Carousel pada link berikut.
Langkah 2 : Cara Membuat Slider dengan Owl Carousel
Setelah kalian download pluginnya silahkan kalian ekstrak kemudian cari file css, dan js filenya dan buat struktur file seperti berikut.
Langkah 3 : Cara Membuat Slider dengan Owl Carousel
Sambungkan file CSS yang terdapat didalam folder css seperti berikut ini.
<link rel="stylesheet" href="css/docs.theme.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
Selanjutnya, kita akan membuat dan set gambar untuk slider dengan kode HTML berikut.
<section id="demos">
<div class="row">
<div class="large-12 columns">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="images/owl-1.png" >
</div>
<div class="item">
<img src="images/owl-2.png" >
</div>
<div class="item">
<img src="images/owl-3.png" >
</div>
<div class="item">
<img src="images/owl-4.png" >
</div>
<div class="item">
<img src="images/owl-5.png" >
</div>
<div class="item">
<img src="images/owl-1.png" >
</div>
<div class="item">
<img src="images/owl-2.png" >
</div>
</div>
</div>
</div>
</section>
</body>
Langkah 4 : Cara Membuat Slider dengan Owl Carousel
Kemudian ketikan kode jQuery agar plugin dapat berjalan dengan baik.
<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>
Setelah semua langkah dan kode telah diketikan, simpan filenya kemudian buka pada browser masing-masing dan lihat hasilnya, Jika berhasil maka tampilannya akan terlihat seperti gambar berikut ini.
Bagaiamana menarik bukan slider nya, dan tentunya sangat mudah sekali untuk diterapkan pada web, baiklah sampai disini tutorial bagaimana Cara Membuat Slider dengan Owl Carousel, semoga bermanfaat dan selamat mencoba.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
