使用owlcarousel来拼贴拼贴图像

时间:2016-04-04 00:49:12

标签: javascript jquery css owl-carousel

我使用名为owlcarousel的插件制作了几个图像拼贴的滑块。当我尚未缩小谷歌浏览器,歌剧和野生动物园的屏幕时,拼贴画会正确显示。 When the screen is normal (not reduced)

屏幕很小后,显示屏完全不同 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 {
	top: 0;
	bottom: 0;
	float:left;
	width: 190px;
}
.featured-sellers-collage .div1 p img {
	
	width: 100%;
}
<div class="container">
						<div class="carousel-featured-sellers">
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>

							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
						</div>
					</div>
					<script src="js/jquery-1.12.2.min.js"></script>
					<script src="js/owl.carousel.min.js"></script>
					<script>
						(function($){
				
							$('.carousel-featured-sellers').owlCarousel({
								items: 3,
								loop:true,
								margin:25,
								nav:true,
								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>"],
								dots: true,
								responsive:{
									0:{
										items:1
									},
									430:{
										items:2
									},
									800:{
										items:3
									},
									1400:{
										items:4
									},
									1800:{
										items:6
									},
									2400:{
										items:7
									},
									3000:{
										items:9
									}
								}
							})
							
						})(jQuery);
					</script>
						

请告诉我如何解决这个问题。感谢

1 个答案:

答案 0 :(得分:1)

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

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

试试这段代码:

&#13;
&#13;
body {
	width: 380px;
}
.featured-sellers-collage {
  width: 100%;
}

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