在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

我认为这是你想要的，但让我知道，如果它不是。小提琴

你需要做两件事来实现这一点。首先，你必须去掉幻灯片的宽度。

jQuery

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

然后你需要将margin: 0 auto添加到每个图像中，使其在li中居中。

CSS

.carousel li img {
    margin: 0 auto;
}

让我知道这是你想要的。

Answer 2

请参考此JS Fiddle Link

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 .