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>
猜你需要

豫ICP备2021026617号-1  豫公网安备:41172602000185   Copyright © 2021-2028 www.78moban.com/ All Rights Reserved

本站作品均来自互联网,转载目的在于传递更多信息,并不代表本站赞同其观点和对其真实性负责。如有侵犯您的版权,请联系 1565229909#qq.com(把#改成@),我们将立即处理。