Question

Owl Carousel运行良好但点在prestashop 1.6模块中未显示。那么，我怎么能显示点？请任何帮助。

我正在使用

/ ** owl.carousel.min.css

Owl Carousel v2.2.0
版权所有2013-2016 David Deutsch
在麻省理工学院获得许可 * /

/ ** owl.carousel.js

Owl Carousel v2.2.0
版权所有2013-2016 David Deutsch
猫头鹰旋转木马
@version 2.1.6

结果

我的代码在prestashop 1.6的模块中的tpl文件中：

      <div class="panel">  
           <h1 class="panel_title">All Products .............. ( {$id_shop} )</h1>   
           <div class="store_wise_products">
               <div class="owl-carousel store_wise_slider" style="background:#eee; padding:2px;">
                  {foreach from=$shopImgSql_results key=k item=shopImg}   
                      <div class="item"> 
                           <img  class="img-responsive"  src="{$dir_assets}uploadslider/{$shopImg.shop_img_name}-{$shopImg.id}-{$shopImg.img_extension}"> 
                      </div> 
                  {/foreach} 
              </div>
         </div> 
      </div>  





    <script>  
       jQuery(document).ready(function($) { 
            var owl = $('.store_wise_slider'); 
            owl.owlCarousel({
            loop: true,
            autoplay:true,
            nav: true,
            dots: true,
            lazyLoad: true, 
            margin: 10,
            items: 1, 
            navText: [ '<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>' ],  
            responsive: {
              0: {
                 items:1
                }, 
             } 
          });
        });
    </script>

Answer 1

请确保您已包含所有资源：

的jquery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css

以下是一些重要的css希望这会对你有所帮助：

.owl-theme .owl-controls .owl-page {
  display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
   background: none repeat scroll 0 0 #869791;
   border-radius: 20px;
   display: block;
   height: 12px;
   margin: 5px 7px;
   opacity: 0.5;
   width: 12px;
}

希望这会对你有用jSFiddle

祝你好运！

为什么不显示猫头鹰旋转木马点？

1 个答案: