Question

我在一个网站上工作，有两张来自“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>

我的照片滑块，＆＃34;猫头鹰旋转木马＆＃34;将照片放在彼此之下？

1 个答案: