第二个猫头鹰轮播滑块未加载

Question

我正忙于一个网站，有 2 个来自 owl-carousel 的照片滑块。

第一个工作正常，但第二个只显示 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 类。
如果这是复制/粘贴错误，请告诉我。