当我将bxslider容器的宽度设置为100％时，第一张幻灯片总是出现在左侧，第二张幻灯片被裁剪。我想要的是第一张幻灯片在中间显示，而上一张和下一张幻灯片在两边都被裁剪。这可能吗？
HTML：
<div id="container-carousel">
<ul class="carousel">
<li><img src="http://parade.condenast.com/wp-content/uploads/2013/12/pizza-cat.jpg" /></li>
<li><img src="http://parade.condenast.com/wp-content/uploads/2013/12/pizza-cat.jpg" /></li>
<li><img src="http://parade.condenast.com/wp-content/uploads/2013/12/pizza-cat.jpg" /></li>
<li><img src="http://parade.condenast.com/wp-content/uploads/2013/12/pizza-cat.jpg" /></li>
</ul>
</div>
CSS：
#container-carousel {
width: 750px;
border: 3px solid red;
}
.bx-wrapper {
min-width: 100%;
}
jQuery的：
$('.carousel').bxSlider({
slideWidth: 500,
minSlides: 1,
moveSlides: 1,
slideMargin: 0
});
已解决（回应式）： http : //jsfiddle.net/TPspv/4/
请参考这个JS小提琴链接
JS代码
$(function() {
$('.carousel').bxSlider({
pager: false,
slideWidth: 200,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
adaptiveHeight: true,
slideMargin: 10
});
$('.bx-wrapper').first().css('max-width', '240px');
});
CSS代码：
.carouselWrapper {
margin: 0 auto;
max-width: 240px;
}
.carouselWrapper .bx-viewport {
padding-left: 20px;
width: inherit !important
}
.carousel .slide .imgslide { overflow: hidden; }
.carousel .slide .imgslide img { width: 100%; }
如果您还有其他疑问，请在下面评论。
关于D。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句