0
私はowlcarousel
というプラグインを使用してカルーセルを作成しています。カルーセルとコラージュが作られました。この作品は、Google Chrome、Safari、Opera、Firefoxでテストされています。 Firefoxを除いてすべてがうまく動作します。owercarouselで作成したカルーセル用のコラージュを作成します
カルーセルが正常に動作している、これはどのように表示されます:Firefoxのオン
を、これはカルーセルに関する私のコードの一部です。 (HTML):
<div class="container">
\t \t \t \t \t \t <div class="carousel-featured-sellers">
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <script src="js/jquery-1.12.2.min.js"></script>
\t \t \t \t \t <script src="js/owl.carousel.min.js"></script>
\t \t \t \t \t <script>
\t \t \t \t \t \t (function($){
\t \t \t \t
\t \t \t \t \t \t \t $('.carousel-featured-sellers').owlCarousel({
\t \t \t \t \t \t \t \t items: 3,
\t \t \t \t \t \t \t \t loop:true,
\t \t \t \t \t \t \t \t margin:15,
\t \t \t \t \t \t \t \t nav:true,
\t \t \t \t \t \t \t \t navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
\t \t \t \t \t \t \t \t dots: true,
\t \t \t \t \t \t \t \t responsive:{
\t \t \t \t \t \t \t \t \t 0:{
\t \t \t \t \t \t \t \t \t \t items:1
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 430:{
\t \t \t \t \t \t \t \t \t \t items:2
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 800:{
\t \t \t \t \t \t \t \t \t \t items:3
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 1400:{
\t \t \t \t \t \t \t \t \t \t items:4
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 1800:{
\t \t \t \t \t \t \t \t \t \t items:6
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 2400:{
\t \t \t \t \t \t \t \t \t \t items:7
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 3000:{
\t \t \t \t \t \t \t \t \t \t items:9
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t })
\t \t \t \t \t \t \t
\t \t \t \t \t \t })(jQuery);
\t \t \t \t \t </script>
一部、:
.featured-sellers-collage .div1{
\t width: 100%;
}
.featured-sellers-collage .div1 p {
\t margin-bottom: 0;
\t margin-top: 0;
\t width:50%;
}
.featured-sellers-collage .div2 {
\t width: 100%;
\t margin-bottom: 0;
}
.featured-sellers-collage .div1 p:first-child {
\t float:left;
}
.featured-sellers-collage .div1 p:last-child {
\t float:right;
}
、私はその問題を解決する方法を教えてください。