Question

我想创建一个非常简单的无缝循环旋转木马，并尝试使用bxSlider，但遇到的问题是我的图像偏离中心。

我有3 x 1000px宽的图像，我想要做的就是确保活动图像位于浏览器中间，其他两个图像在左/右侧无限循环，如下所示：

enter image description here

我尝试过使用负边距技巧（left: 50%和margin-left: -500px），但它没有用，而且bxSlider有点疯狂。

我的代码非常简单，我在这里有一个小提琴：http://jsfiddle.net/j3hgA/

<ul class="bxslider">
    <li><img src="http://i.imgur.com/pOh3bXm.jpg" /></li>
    <li><img src="http://i.imgur.com/VrvQUzu.jpg" /></li>
    <li><img src="http://i.imgur.com/pJr77Ee.jpg" /></li>
</ul>

有更好的方法吗？

Answer 1

这就是您所需要的......

DEMO： - http://jsfiddle.net/dush88gs/rj9r74a0/41/

完整的代码在这里

的 HTML

<head> <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/> </head> <body> <div class="bxslider"> <div class="slide"><img src="images/1.jpg" width="1000" /></div> <div class="slide"><img src="images/2.jpg" width="1000" /></div> <div class="slide"><img src="images/3.jpg" width="1000" /></div> <div class="slide"><img src="images/4.jpg" width="1000" /></div> <div class="slide"><img src="images/5.jpg" width="1000" /></div> <div class="slide"><img src="images/6.jpg" width="1000" /></div> </div>  <script src="js/jquery.js"></script>  <script src="js/jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 900, minSlides: 2, maxSlides: 3, moveSlides: 1, pager: false, auto: true }); }); </script> </body>

<强> CSS

div.bxslider { margin-left: 25%; margin-right: 25%; }

Answer 2

要使滑块位于中心，必须将旋转木马包含在容器中，因此将滑块插入容器中......

<强> HTML： -

<div class="slide-contain">
<ul class="bxslider">
    <li><img src="http://i.imgur.com/pOh3bXm.jpg" /></li>
    <li><img src="http://i.imgur.com/VrvQUzu.jpg" /></li>
    <li><img src="http://i.imgur.com/pJr77Ee.jpg" /></li>
</ul>
</div>

<强> CSS： -

.slide-contain { margin: 0 auto; width:1000px; }

对于无限循环，您必须插入参数才能使滑块工作...

<强> JS： -

$("#slider").bxSlider({
    moveSlides: 1,
    displaySlideQty: 2,
    responsive: false,
    infiniteLoop: true
});

如下面的答案......

DEMO： - http://jsfiddle.net/j3hgA/2/show/

谢谢，希望对你有用......

Answer 3

也许这就是你需要的......

http://jsfiddle.net/j3hgA/1/

body {
    overflow: hidden;
}

ul {
    position: absolute;
    list-style: none;
    width: 3000px;
    left: 50%;
    margin-left: -1500px;
}

li {
    float: left;
    width: 1000px;
}

Answer 4

这是一个“简单”的CSS问题。

我将我的旋转木马的.bx-wrapper设置为5000px宽，以容纳主要的3×1000px宽幻灯片，以及bxSlider在旋转木马左侧和右侧生成的2×1000px宽“溢出”幻灯片实现“无缝”效果。

因此我应该在我的旋转木马的主包装div上有margin-left: -2500px; left: 50%;。也就是说，左边距是整个旋转木马的总宽度的一半，而不仅仅是一张图像。

因此，最终的CSS类似于：

#slideshow-wrapper {
    width: 1000px;        /* Width of single slide */
    margin-left: -2500px; /* Half of total carousel width including overflow images */
    left: 50%;
}

#slideshow-wrapper .bx-wrapper {
    width: 5000px !important; /* Total width including overflow images */
    margin: 0 auto;
    position: relative;
}

最后，每次循环播放时，我都会在滑块右侧看到“白色闪光”或“弹出”。这是因为我没有设置bxSlider的displaySlideQty选项，它决定了屏幕上随时可以看到的幻灯片数量。

默认displaySlideQty是1，但在我的情况下，我实际上在视口中显示了3个图像的一部分，因此bxSlider没有预渲染左/右“溢出”或“无缝”图像在合适的时间。将displaySlideQty更改为3工作，幻灯片无限循环。

$("#slider").bxSlider({
    moveSlides: 1,
    displaySlideQty: 2,
    responsive: false,
    infiniteLoop: true
});

使用无缝循环水平对中bxSlider旋转木马的活动图像？

4 个答案:

这就是您所需要的......