详情页

Owl Carousel使用代码

时间:2023年11月28日

编辑:佚名

功能说明
Owl Carousel自动适应页面宽度,在手机端显示的是每次1个图标,在PC端显示每次6个图标。自动从右边向左边滚动。
Owl Carousel使用代码
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>
相关文章
猜你需要