0

owl-carousel の 2 つのフォト スライダーがあるサイトで忙しいです。

最初のものは正常に動作しますが、2 番目のものは 1 つの画像のみを表示し、ボタンは表示されず、非常に大きなコンテナーが表示されます。これは初めてなので、どんな助けも素晴らしいでしょう。

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

1 に答える 1

0 
$("#owl-portfolio").owl-carousel({
});


$("#owl-portfolio1").owlcarousel({           
});

owl-carousel の呼び出しに 2 つの異なる名前を使用しています。これらのうちの 1 つが正しくありません.owlcarousel()。正しいものだと思います。

編集これが単に Stackoverflow のコピー/貼り付けエラーである場合は、お知らせください。

編集 2

カルーセル (HTML タグ) に別の奇妙な点があることに気付きました

class="owl- carousel owl-theme"

クラス分けでowl-carouselはなく、むしろあるべきだと感じます。繰り返しますが、これがコピー/貼り付けのエラーである場合は、お知らせください。owl-carousel

于 2014-05-20T12:58:02.047 に答える