Question

我在网站上忙碌，有两张来自猫头鹰旋转木马的照片滑块。

第一个工作正常，但第二个只显示1张图片，没有按钮和一个大容器。新的，所以任何帮助都会很棒。

        <!-- modal body -->
        <div class="modal-body"> 
           <div class="row">
              <div class="col-md-12"> 

                 <!-- portfolio media -->
                 <div class="portfolio-images"> 

                    <!-- image slider -->
                    <div id="owl-portfolio1" class="owl- carousel owl-theme">
                       <div class="item"> <img src="images/print1.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
                       <div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>   
                       <div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
                       <div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div> 
                       <div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>   
                       <div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
                       <div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div> 
                       <div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>   
                       <div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
                       <div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>                
                    </div>




                 </div>
              </div>
           </div>
        </div>

                            <script>


                    $(document).ready(function() {

                       $("#owl-portfolio").owl-carousel({
                       });


                       $("#owl-portfolio1").owlcarousel({           
                       });
                    });
        </script>
        </div>








        <div class="col-md-6 work">
              <div class="portfolio-item clearfix"> 

                 <!-- portfolio content -->
                 <div class="portfolio-content pull-right"> <a href="#" class="more-plus" data-toggle="modal" data-target="#portfolioModal1"> <i class="fa fa-plus"> </i> </a>
                    <div class="portfolio-content-wrap clearfix">
                       <div class="portfolio-content-center">
                          <h4>x</h4>
                          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
                       </div>
                    </div>
                 </div>
                 <!-- .portfolio content --> 

                 <!--portfolio image -->
                 <div class="portfolio-image pull-left"> <a href="#" data-toggle="modal" data-target="#portfolioModal1"> <img src="images/portfolio-3.jpg" class="img-responsive img-thumbnail pull-left" title="" alt="" /> </a> </div>
                 <!-- .portfolio image --> 

              </div>
                 ><!-- .portfolio content --> 

              </div>
           </div>
           <!-- .portfolio item --> 

        </div>

Answer 1

$("#owl-portfolio").owl-carousel({
});


$("#owl-portfolio1").owlcarousel({           
});

你使用两个不同的名字来调用owl-carousel。其中一个是不正确的，我认为.owlcarousel()是正确的。

编辑如果这只是Stackoverflow的复制/粘贴错误，请告知我们。

修改2

注意到旋转木马中的另一个奇怪的事情（HTML标记）

class="owl- carousel owl-theme"

我觉得应该owl-carousel而不是单独的owl-和carousel类。
同样，如果这是复制/粘贴错误，请告诉我。

第二个Owl-carousel滑块无法加载

1 个答案: