Cara Membuat Banner Slider Web dengan Owl Carousel

Masih seputaran web desain, yaitu dalam postingan ini saya membuat tutorial bagaimana cara membuat banner slider dengan library owl carousel. Banner slider menurut saya bisa menambah web kita menjadi lebih menarik dan interaktif. Akan tetapi tentunya juga harus diikuti dengan desain banner yang menarik juga.

Baca Juga : Cara Membuat Parallax Scrolling dengan Stellar.js
                   Mengatasi Bootstrap DateTimepicker Tidak Muncul Saat Input Readonly

Ok, mari kita mulai saja tutorialnya dan jangan lupa kita juga butuh library css animate untuk menambahkan animasinya. (semua kelengkapan source code dalam artikel ini sudah saya sediakan pada akhir artikel)

silahkan buat satu file dengan format .html

berikut adalah script html

<div class="konten-slider d_flex">
    <div class="single-slide slider-bg-one">
     <div class="container">
            <div class="text-slider text-center">
                <h3>TEXT BOX 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </div>
    </div>
    <div class="single-slide slider-bg-two">
     <div class="container">
            <div class="text-slider text-center">
                <h3>TEXT BOX 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </div>
    </div>
    <div class="single-slide slider-bg-three">
     <div class="container">
            <div class="text-slider text-center">
                <h3>TEXT BOX 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </div>
    </div>
</div>

Dari script html di atas, saya mencontohkan membuat 3 slider yang masing masing slider berisi teks deskripsi. Dari setiap slider akan kita tambahkan background gambar pada script css berikut :

script css

html,body {
  height: 100%;
  }
 .konten-slider{
  width: 100%;
    height: 100%;
    position: relative;
    z-index: 9;
 }

 .d_flex {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }

 .single-slide {
     z-index: 9;
     position: relative;
     height: 100%;
 }

 .single-slide:before {
  background: #04091e;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
  }

 .konten-slider.owl-carousel div:not(.owl-controls) {
     height: 100%;
 }

 .slider-bg-one {
     background: url("./images/image1.jpg") no-repeat scroll center center / cover;
 }

 .slider-bg-two {
     background: url("./images/image2.jpg") no-repeat scroll center center / cover;
 }

 .slider-bg-three {
     background: url("./images/image3.jpeg") no-repeat scroll center center / cover;
 }

 .konten-slider .text-slider {
     color: #FFF;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding-top: 100px;
 }

 .konten-slider .text-slider h3 {
     margin-bottom: 30px;
     color: #fff;
     line-height: 1;
     font-size: 30px;
     font-weight: bold;
 }

 .konten-slider .text-slider p {
     color: #fff;
     font-size: 16px;
 }

 .owl-item.active .single-slide .text-slider h3 {
     -webkit-animation: 1s ease 0.5s normal both 1 running fadeInUp;
     animation: 1s ease 0.5s normal both 1 running fadeInUp;
 }

 .owl-item.active .single-slide .text-slider p {
     -webkit-animation: 1s ease 0.8s normal both 1 running fadeInUp;
     animation: 1s ease 0.8s normal both 1 running fadeInUp;
 }

Pada bagian script css di atas, saya menambahkan property background pada setiap slider dengan gambar yang sudah ditentukan. Kemudian pada animasi text ada contoh kata "fadeInUp" yang merupakan animasi dari teks tersebut. Untuk menggantinya dengan yang lain, kalian bisa buka dokumentasinya pada link berikut : https://daneden.github.io/animate.css/

script javascript

var slider = $('.konten-slider');
     slider.owlCarousel({
         merge: true,
         smartSpeed: 3000,
         loop: true,
         autoplay: true,
         autoplayTimeout: 8000,
         margin: 0,
         animateIn: 'fadeIn',
         animateOut: 'fadeOutRight',
         responsiveClass: true,
         responsive: {
             0: {
                 items: 1
             },
             600: {
                 items: 1
             },
             1000: {
                 items: 1
             },
             1200: {
                 items: 1
             }
         }
     });

Dari script javascript di atas kita memanggil owl carousel untuk class "konten-slider", yang di dalamnya berisi beberapa opsi standar yang dapat kalian pelajari pada situs resminya di sini : https://owlcarousel2.github.io/OwlCarousel2/

Silahkan simpan project kalian dan jalankanpada browser kemudian tunggu beberapa saat untuk melihat transisi dari slidernya.

Berikut script utuh dari script script di atas :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>my web</title>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">

<style>


 html,body {
  height: 100%;
  }
 .konten-slider{
  width: 100%;
    height: 100%;
    position: relative;
    z-index: 9;
 }

 .d_flex {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }

 .single-slide {
     z-index: 9;
     position: relative;
     height: 100%;
 }

 .single-slide:before {
  background: #04091e;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
  }

 .konten-slider.owl-carousel div:not(.owl-controls) {
     height: 100%;
 }

 .slider-bg-one {
     background: url("./images/image1.jpg") no-repeat scroll center center / cover;
 }

 .slider-bg-two {
     background: url("./images/image2.jpg") no-repeat scroll center center / cover;
 }

 .slider-bg-three {
     background: url("./images/image3.jpeg") no-repeat scroll center center / cover;
 }

 .konten-slider .text-slider {
     color: #FFF;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding-top: 100px;
 }

 .konten-slider .text-slider h3 {
     margin-bottom: 30px;
     color: #fff;
     line-height: 1;
     font-size: 30px;
     font-weight: bold;
 }

 .konten-slider .text-slider p {
     color: #fff;
     font-size: 16px;
 }

 .owl-item.active .single-slide .text-slider h3 {
     -webkit-animation: 1s ease 0.5s normal both 1 running fadeInUp;
     animation: 1s ease 0.5s normal both 1 running fadeInUp;
 }

 .owl-item.active .single-slide .text-slider p {
     -webkit-animation: 1s ease 0.8s normal both 1 running fadeInUp;
     animation: 1s ease 0.8s normal both 1 running fadeInUp;
 }

  
</style>

</head>
<body>

<div class="konten-slider d_flex">
    <div class="single-slide slider-bg-one">
     <div class="container">
            <div class="text-slider text-center">
                <h3>TEXT BOX 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </div>
    </div>
    <div class="single-slide slider-bg-two">
     <div class="container">
            <div class="text-slider text-center">
                <h3>TEXT BOX 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </div>
    </div>
    <div class="single-slide slider-bg-three">
     <div class="container">
            <div class="text-slider text-center">
                <h3>TEXT BOX 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.2.min.js"></script>

<script src="js/bootstrap.js"></script>
<script src="js/owl.carousel.min.js"></script>

<script type="text/javascript">
 $(document).ready(function(){
  var slider = $('.konten-slider');
     slider.owlCarousel({
         merge: true,
         smartSpeed: 3000,
         loop: true,
         autoplay: true,
         autoplayTimeout: 8000,
         margin: 0,
         animateIn: 'fadeIn',
         animateOut: 'fadeOutRight',
         responsiveClass: true,
         responsive: {
             0: {
                 items: 1
             },
             600: {
                 items: 1
             },
             1000: {
                 items: 1
             },
             1200: {
                 items: 1
             }
         }
     });
 });
</script>
</body>

</html>

Semua kelengkapan source code dapat kalian download pada link berikut, dan jika masi ada yang belum dipahami silahkan tinggalkan komentar di bawah ya...

Baca Artikel lanjutannya untuk : Menambahkan Tombol Next dan Prev pada Banner dengan Owl Carousel