0
owlcarousel
という名前のプラグインを使用して、いくつかの画像コラージュのスライダを作成しています。 Google Chrome、オペラ、サファリの画面をまだ縮小していない場合、コラージュが正しく表示されます。 owlcarouselを使用してコラージュ画像を表示する
画面が小さくなると、表示画面が正常である場合、私はまた、Firefoxの37.0.2上のコードおよびInternet Explorer 11を試験
完全に異なっています。 Internet Explorerのオン
この私がカルーセルを実現するために使用するコード:Firefoxのオン
.featured-sellers-collage {
width: 380px;
}
.featured-sellers-collage .div1 p {
\t top: 0;
\t bottom: 0;
\t float:left;
\t width: 190px;
}
.featured-sellers-collage .div1 p img {
\t
\t width: 100%;
}
<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 </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:25,
\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>
\t \t \t \t \t \t
は親切に私に知らせて私はどのようにcaその問題を解決する。ありがとう
これはあなたのイメージで起きているかもしれない画像に修正幅を追加width.Dotn't。画像を反応させる。 –