jquery - 首先在 bxslider 中滑动以从容器中间开始，而不是离开

Question

当我给 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/uHCZ8/

已解决(响应式): http://jsfiddle.net/TPspv/4/

Answer 1

我认为这就是您想要的，但如果不是，请告诉我。 Fiddle

您需要做两件事才能实现这一目标。首先，您必须去掉幻灯片的宽度。

jQuery

$('.carousel').bxSlider({
    minSlides: 1,
    moveSlides: 1,
    slideMargin: 0
});

然后您需要为每个图像添加 margin: 0 auto 使其在 li 中居中。

CSS

.carousel li img {
    margin: 0 auto;
}

请告诉我这是否是您想要的。