Cara Membuat Owl Carousel Lebih Menarik dengan 3 Slider

20 October 2021

Halo sobat Blanter, sudah lama saya tidak membagikan tutorial untuk sobat belajar secara aktif mandiri dalam mengembangkan blognya, karena kesibukan dalam jasa redesign dan jasa custom template blogger. Saya tertarik dengan desain slide dengan model ini karena selain unik dan juga jarang yang membagikan tutorial owl carousel slide dengan model ini.

Bagi sobat yang sudah sering menggunakan owl carousel tentu tidak asing dengan fitur yang ditawarkan widget slider ini, dengan fitur yang dapat digeser dengan mouse, tombol next prev dan juga tombol dots kecil yang juga dapat berpindah slide dan menampilkan jumlah slide.

Bagi website atau blog yang memiliki container yang lumayan panjang, namun menginginkan gambar slider yang kecil, widget ini bisa jadi solusinya, karena hanya menampilkan gambar kecil di tengah dan kiri kanannya memperlihatkan gambar selanjutnya namun samar-samar.

Widget ini berguna untuk blog sobat yang menjadikan gambar media promosi, seperti berjualan, mempromosikan jasanya, mempromosikan bidangnya, atau bahkan menampilkan gambar karya untuk blog galeri.

Demo

Cara Memasang Owl Carousel Slide

Tutorial ini dapat digunakan untuk seluruh platform, mulai dari Blogger maupun Wordpress.

Sebelumnya, pastikan blog sobat sudah menggunakan jQuery.

Langkah pertama untuk pemasangan di Blogger, silahkan sobat masuk ke Blogger > Tema > Edit HTML.

Tambahkan CSS berikut ini tepat di atas kode ]]></b:skin>

/* Owl Carousel Slide Design by www.idblanter.com */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{background:#fff;display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;width:100%;transform:scale(1.7);padding:80px 0}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none;transition:all .4s ease-in-out}.owl-carousel .owl-item img{background:#eee;display:block;width:100%;border-radius:5px;height:240px;object-fit:cover}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^='']{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.owl-item .blanter-owl-image{opacity:0;transition:all .3s ease-in-out}.owl-item.active .blanter-owl-image{transform:scale(1);opacity:1}.owl-item .blanter-desc{transform:translate(0,40px);opacity:0}.owl-item.active .blanter-desc{transform:translate(0,0);opacity:1}.owl-dots{text-align:center;position:relative;bottom:0;left:0;right:0}.blanter-owl-image{z-index:1}.owl-carousel .owl-dots button{background:#ddd;width:11px;height:11px;border-radius:10px;margin:0 5px}.owl-carousel .owl-dots button.active{background:#2b69e2;width:20px}
.sliderbanner.container{position:relative;max-width:1200px;margin:0 auto;padding:20px 0;overflow:hidden}.owl-item.active{opacity:.5}.owl-item.active.center{opacity:1}
.owl-nav{position:absolute;z-index:1;width:100%;font-size:40px;top:40%}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{box-shadow:0 5px 8px rgb(0 0 0 / 15%);background:#fff;height:50px;line-height:0;width:50px;border-radius:100%;position:absolute}
.owl-carousel .owl-nav button.owl-next{right:18%}.owl-carousel .owl-nav button.owl-prev{left:18%}
@media screen and (max-width:980px){.owl-carousel .owl-stage-outer{transform:scale(1.5)}}
@media screen and (max-width:768px){.owl-carousel .owl-stage-outer{transform:scale(1);padding:10px 0}.owl-nav{display:none}}

Langkah kedua, letakan kode berikut tepat di atas kode </body>

<script src="https://cdn.jsdelivr.net/gh/blanter/design@master/blanter-owlcarousel.js"></script>
<script>
//<![CDATA[
// Enable Owl Carousel
$('.owl-carousel').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 15,
autoplay: true,
dots:true,
nav:true,
autoplayTimeout: 8500,
smartSpeed: 450,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
//]]>
</script>

Langkah terakhir, sobat hanya perlu memasukan kode berikut ini pada posisi dimana sobat ingin memunculkan widget slider ini, dapat dipasang di posts, halaman, edit html, maupun tata letak blogger.

<!-- SLIDER BLANTER -->
<div class='sliderbanner container'>
<div class='owl-carousel owl-theme' id='blanter-carousel'>
<!-- START -->
<div class='blanter-owl-image'>
  <a href='#link' title='Slider'>
    <img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTU7fK7n3WZ7Jgl11NYq1fqKjvEYCetnvZcg99BFhzjaFtKX-khr-QM5LkH6NncIMIkF0rON2m230w1bBE46MX7lAgF4pDiB2VITjjBWVvIB8AixaNazX-JakWMMnZc834fxStxMoKdo/s1000/Orbit+Working+%25284%2529-min.jpg'/>
  </a>
</div>
<div class='blanter-owl-image'>
  <a href='#link' title='Slider'>
    <img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGNKUsxO7fNkP7v8RuN0HonIINf1wtjW_7bZ6Sq2XY34V3sazu54cT_QnofpNEu-gFMnPrK8GCNoajS08NfUgjvKN-dBc8sZCR0ON9aGBPZLrKdQfYDr73Pp_y8zsb_9V7XD41EGHPWx4/s1000/Orbit+Working+%25282%2529-min.jpg'/>
  </a>
</div>
<div class='blanter-owl-image'>
  <a href='#link' title='Slider'>
    <img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ju3TdBj9RKET_tNMaMAO2uaJ4bGI0fJ_RpGovuvxahwoLFip1jSJTlYrMqQ1NuaFdQb1sC91l5Pq8jYYhqlSVaTu8iuCvAClcfyeCn5d0CvAmyk_WRPYU8sYDs9PF_8tU27ocjCZKWM/s1000/Orbit+Working+%25283%2529-min.jpg'/>
  </a>
</div>
<div class='blanter-owl-image'>
  <a href='#link' title='Slider'>
    <img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2nooSBxICuRLWNO9UEsk56wPbzZLCRYXdPI4d-jWyF5fzqEY8f5ItOMlhCFh81L3S2fBpHkwEwE2omCk3VFHlI8kbJcsBw8yAKo6c0SZ7C8e2Ahcbc8gAwVn3XPDwuqZpWO-pvqTL44/s1000/Orbit+Working+%25285%2529-min.jpg'/>
  </a>
</div>
<!-- END -->
</div>
</div>
<!-- END SLIDER BLANTER -->

Simpan Tema.

Untuk menambah list slide gambarnya sobat hanya perlu melihat bagian berikut ini:

Lihat Juga: Blanter Tokoside, Generasi Baru dari Sebuah Toko Online Blogger

Sekian, itulah tutorial yang bisa saya bagikan kali ini. Jika ada pertanyaan maupun request dan bantuan silahkan isi kolom komentar. Terima kasih.

Dunia Blanter