功能说明
Owl Carousel自动适应页面宽度,在手机端显示的是每次1个图标,在PC端显示每次6个图标。自动从右边向左边滚动。
HTML代码
<div class="owl-carousel owl-theme owl-loaded owl-drag" id="brand">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item active">
<a href="#"><img src="theme/img/smc.png" alt="smc" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/hdjt.png" alt="和达交投" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/dams.png" alt="大安模塑" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/saint.png" alt="saint" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/ddyy.png" alt="大地影院" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/gjjj.png" alt="顾家家居" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/bayer.png" alt="BAYER药业" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/marykay.png" alt="mary kay" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/xxf.png" alt="相贤府" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/ljgj.png" alt="丽郡国际" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/gjjj.png" alt="宋都" /></a>
</div>
</div>
</div>
</div>
JS调用代码
<script>
$(document).ready(function() {
$('#brand').owlCarousel({
items: 4,
itemsMobile: [479,1],
loop: true,
margin: 0,
callbacks: true,
dots:true,
nav:true,
mouseDrag:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsiveClass:true,responsive:{0:{items:1,margin:0},768:{items:4},1200:{items:6}}
});
})
</script>