/* 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}}
2- ស្វែងរកស្លាក </body> ហើយចម្លងកូដខាងក្រោម យកទៅដាក់ខាងលើស្លាកនោះ ហើយចុច Save Template ។
<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>
3- ប្រើប្រាស់កូដនេះសម្រាប់បង្ហាញ slide នៅទីតាំងដែលអ្នកចង់បង្ហាញ ៖
<!-- 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/AVvXsEgPgrSrmvY-Cm1-eu0hoLUEjYYA4yIn34gK6rlNpAzpjEKzV8UdiI1gEwi2XDCfhBqvFOzDLe8Q9w9ut9cYsVwVi7LEqLGosa7DCtxBSjcb7lQQnmedi0IE7fSDQYTnzsfUr2OtcvErsv4/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/AVvXsEj_DhXieHSAZqWdlGEri7MuuJL5HWIC69DQMf4pknJHWtb3cuSCVH2Is5uooWVhkfh5Ua8VgYpXAS6ZoK_Us8ZtVeS0OC2F_nKhLDu41P2p9wxw7tNbIRwm7beGOCMjLN1GDUMaijlYYOc/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/AVvXsEjgITSSWG8HZ_9WJiIy2ubwFNOlrEZ8DdVBuDjpCV8BlQAc5Q8brkBev5GIbp1yVX5MYrVdxVgNqpKeo54sLPUOwWc_p78BFQD5kJ-yLBbGLP6hbzRANKigzXOr7X7qgy2e5q_vGHNkQFc/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/AVvXsEi8tZA3e0jD6MSkPTn3fJHVPjKPczyqL-GQMpn192qWAdkHM-h0kx42UZlJ6u7ZCU_h_E62_QGSrphLCNoV27EC3UufynM4vHFCiKQWrIClIdp2VoCghyphenhyphenl4mSoKIcsDQTHzCwwueMWWcgU/s1000/Orbit+Working+%25285%2529-min.jpg'/>
</a>
</div>
<!-- END -->
</div>
</div>
<!-- END SLIDER BLANTER -->
Post a Comment