2016-04-04 77 views
0

我使用名为owlcarousel的插件制作了多个图像拼贴的滑块。当我还没有减少谷歌浏览器,歌剧和Safari浏览器的屏幕时,拼贴显示正确。 When the screen is normal (not reduced)使用owlcarousel滑动拼贴图像

一旦屏幕小,显示的是完全不同的 When the screen is reduced

我还测试在Firefox 37.0.2代码和Internet Explorer 11时,屏幕是正常的。

在Firefox上: The display on firefox when the screen is normal

在Internet Explorer: The display on firefox when the screen is normal (the collages do not have any margin set)

我用它来实现转盘代码:

.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

请让我知道我怎么样ñ解决这个问题。谢谢

+1

这可能发生图像的width.Dotn't固定宽度添加到图像。使图像响应。 –

回答

1

float: right;添加到您的代码的div2将解决在Firefox和Internet Explorer上的问题。

现在关于响应问题是由于固定宽度,更好的使用百分比。

试试这个代码:

body { 
 
\t width: 380px; 
 
} 
 
.featured-sellers-collage { 
 
    width: 100%; 
 
} 
 

 
.featured-sellers-collage .div1 p { 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t float:left; 
 
\t width: 50%; 
 
} 
 
.featured-sellers-collage .div1 p img { 
 
\t 
 
\t width: 100%; 
 
} 
 
.featured-sellers-collage .div2 { 
 
\t flaot: right; 
 
}