2016-04-04 129 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; 
 
}