2

I'm working on a site, with 2 photo sliders from "owl-carousel".

The first slider works perfectly, but the second slider places all the photo's under each other.

Is it a problem in the jquery or just in the 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>
4

1 回答 1

0

您是否确保每个都有一个特定的 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>
于 2014-05-20T07:40:58.873 回答