Cách làm cho Owl Carousel hấp dẫn hơn với 3 thanh trượt

Xin chào các bạn hôm nay MauThemeBlog chia sẻ một bài hướng dẫn cho các bạn học chủ động độc lập phát triển blog của mình, vì mình bận dịch vụ thiết kế lại và dịch vụ tùy chỉnh mẫu blogger. Tôi thích thú với thiết kế slide với mô hình này vì ngoài sự độc đáo, hiếm khi chia sẻ hướng dẫn trượt băng chuyền cú với mô hình này. 

Đối với những người bạn đã thường sử dụng băng chuyền con cú , chắc chắn bạn đã quen thuộc với các tính năng được cung cấp bởi tiện ích con trượt này, với các tính năng có thể di chuyển bằng chuột, nút thịnh hành tiếp theo và nút chấm nhỏ cũng có thể di chuyển các trang trình bày. và hiển thị số lượng trang trình bày.

Đối với các trang web hoặc blog có vùng chứa khá dài, nhưng lại muốn hình ảnh thanh trượt nhỏ, tiện ích này có thể là giải pháp, vì nó chỉ hiển thị một hình ảnh nhỏ ở giữa và trái phải, hiển thị hình ảnh tiếp theo nhưng mơ hồ.

Tiện ích này hữu ích cho blog của bạn để tạo hình ảnh truyền thông quảng cáo , chẳng hạn như bán, quảng cáo dịch vụ của họ, quảng cáo lĩnh vực của họ hoặc thậm chí hiển thị hình ảnh công việc cho các blog thư viện.

Hướng dẫn này có thể được sử dụng cho tất cả các nền tảng, từ Blogger đến WordPress.

Trước đó, hãy đảm bảo rằng blog của bạn đã sử dụng jQuery .

Bước đầu tiên để cài đặt trên Blogger, vui lòng chuyển đến Blogger> Chủ đề> Chỉnh sửa HTML.

Thêm CSS sau ngay trước thẻ ]]></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}}

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

<!-- 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/AVvXsEgiFmNNxcf6T7L6-l3X6xnwcYa56M3XkmIIg2KGDoqwjyCPRkbsg74BshQL4YZs5m9hrOw_DvbEBSc_QJzDHDn01Vwa9P6yQ1OC-9Vx6-3p9L6TZ5xiK2JlR4qQ8EVmcs5mH663-bSp2AE/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/AVvXsEgZLSv60wgQ1pUfZ-DreIGV9TtnWNTM5XJZvmp7DJlGsusQGPIXXqeNjg4WgXGkGMUuNpNVS1EkxhwIzO5U9FjvFMRveq-eTcnWhv4-4NQZ3QVo1GvWVas7HWEVsp0qd03HchI9ZL5hxlc/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/AVvXsEhCutKUGq9z_K3JSHna72q5FVQSTpq1bMTIL7JzOgOOmbC2LihD1tQoS0TaoyIK4I5h0PtJjk-aQ2xgP6PGgIOHLU63umXCYJSECMvMIbnrxd5ZrzvS1QLyEUF_eHh7nr4nilMlo9tHEbY/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/AVvXsEioGggLTQcx486WlehCyClICNT_WlUOAl9bi5LJ5GoQ_jcrX01KP5_Y6CKAr3ZZDlulxSsgUwi6lu0FEV6iGem4G-U3qfg4V8BSpwMcYYpJGE9LA8QrW05skv2KqV7qgaBZfMpkP7W90PI/s1000/Orbit+Working+%25285%2529-min.jpg'/>
  </a>
</div>
<!-- END -->
</div>
</div>
<!-- END SLIDER BLANTER -->