gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 06:10:17 26 4
gpt4 key购买 nike

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

最佳答案

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

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

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

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

CSS

.carousel li img {
margin: 0 auto;
}

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

关于jquery - 首先在 bxslider 中滑动以从容器中间开始,而不是离开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25018585/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com