我的照片滑块，"owl carousel"照片放在彼此下面？

Question

我在一个网站上工作，有2个照片滑块来自"owl-carousel"。

第一个滑动条工作得很好，但是第二个滑动条把所有的照片放在了彼此的下面。

这是一个问题在jquery或只是在html?

<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">
               <div class="item active"> <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").owlcarousel({
        });
        $("#owl-portfolio").owlcarousel({
        });
    });
</script>
</div>

Answer 1

您是否确保每个都有一个特定的id选择器，如#owl-carousel-1和#owl-carousel-2，然后使用初始化代码单独激活每个，更改选择器以适应每种情况

<div id="owl-carousel-1" class="owl-carousel" >
  <!-- the carousel -->
</div>
<div id="owl-carousel-2" class="owl-carousel" >
  <!-- the second carousel -->
</div>
<script>
$(document).ready(function() {
  $("#owl-carousel-1").owlCarousel();
  $("#owl-carousel-2").owlCarousel();
});
</script>