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固定宽度添加到图像。使图像响应。 –