0
我使用名爲owlcarousel
的插件製作了多個圖像拼貼的滑塊。當我還沒有減少谷歌瀏覽器,歌劇和Safari瀏覽器的屏幕時,拼貼顯示正確。 使用owlcarousel滑動拼貼圖像
我還測試在Firefox 37.0.2代碼和Internet Explorer 11時,屏幕是正常的。
這我用它來實現轉盤代碼:
.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
請讓我知道我怎麼樣ñ解決這個問題。謝謝
這可能發生圖像的width.Dotn't固定寬度添加到圖像。使圖像響應。 –