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;
}

如果这是您想要的，请告诉我。

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.

首先在bxslider中滑动，以便在未离开的容器中间开始

2 个答案:

的jQuery

CSS