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

Question

我在忙着做一个网站，上面有两个来自owl-carousel的照片滑块。

第一个工作得很好，但第二个只显示一张图片，没有按钮和一个太大的容器。这是一个新手，所以任何帮助将是惊人的。

        <!-- 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

注意到carousel (HTML标签)中另一个奇怪的东西

class="owl- carousel owl-theme"

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