6

我想制作一个非常简单的无缝循环轮播，并尝试使用 bxSlider，但遇到图像偏离中心的问题。

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

在此处输入图像描述

我尝试过使用负边距技巧 ( left: 50%and 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>

有一个更好的方法吗？

4

4 回答 4

7

这就是你需要的。。

演示：- 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>

    <!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- bxSlider Javascript file -->
<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%;
}
于 2015-07-30T11:53:43.200 回答
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
});

就像下面的答案...

演示：- http://jsfiddle.net/j3hgA/2/show/

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

于 2013-11-07T04:59:21.530 回答
0

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

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

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

因此，最终的 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
});
于 2013-11-07T04:42:43.593 回答
0

也许这就是你需要的..

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;
}
于 2013-11-05T08:14:31.413 回答