Cara Membuat Slider dengan Owl Carousel

06/12/2017    Risman Hakim    46     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.

https://owlcarousel2.github.io/OwlCarousel2/

Cara Membuat Slider dengan Owl Carousel

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.

Cara Membuat Slider dengan Owl Carousel

Langkah 3 : Cara Membuat Slider dengan Owl Carousel

Sambungkan file CSS yang terdapat didalam folder css seperti berikut ini.

<!-- Stylesheets -->
<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.

<body>
  <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/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>

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.

Cara Membuat Slider dengan Owl Carousel

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.

jQuery, HTML CSS, Tips dan Trik, website

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