2

「 owl-carousel 」の2 つの写真スライダーを使用して、サイトに取り組んでいます。

最初のスライダーは完全に機能しますが、2 番目のスライダーはすべての写真を互いに下に配置します。

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

1 に答える 1

0

それぞれに #owl-carousel-1 や #owl-carousel-2 などの特定の ID セレクターがあることを確認してから、開始コードを使用してそれぞれを個別にアクティブ化し、それぞれのケースに合わせてセレクターを変更します。

<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 に答える