使用无缝循环水平对中bxSlider轮播的活动图像？
Wac*_*Get 6 html css jquery bxslider
我想制作一个非常简单的无缝循环旋转木马,并尝试使用bxSlider,但遇到的问题是我的图像偏离中心.
我有3 x 1000px宽的图像,我想要做的就是确保活动图像位于浏览器的中间,其他两个图像在左/右侧无限循环,如下所示:
我尝试过使用负边距技巧(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>
有一个更好的方法吗？
这就是你需要的......
演示: - 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%;
}
这是一个“简单”的 CSS 问题。
\n\n我将轮播设置.bx-wrapper为 5000 像素宽，以容纳主 3 个 \xc3\x97 1000 像素宽的幻灯片，加上 bxSlider 在左侧和右侧生成的 2 个 \xc3\x97 1000 像素宽的“溢出”幻灯片轮播达到“无缝”的效果。
margin-left: -2500px; left: 50%;因此，我应该在我的旋转木马的主包装 div 上使用它。也就是说，左边距是整个轮播总宽度的一半，而不仅仅是一张图像的总宽度。
因此，最终的 CSS 是这样的：
\n\n#slideshow-wrapper {\n width: 1000px; /* Width of single slide */\n margin-left: -2500px; /* Half of total carousel width including overflow images */\n left: 50%;\n}\n\n#slideshow-wrapper .bx-wrapper {\n width: 5000px !important; /* Total width including overflow images */\n margin: 0 auto;\n position: relative;\n}\n最后，每次循环时，我都会在滑块右侧看到“白色闪光”或“弹出”。这是因为我没有设置 bxSlider 的displaySlideQty选项，该选项决定屏幕上随时应显示多少张幻灯片。
默认值为displaySlideQty1，但就我而言，实际上我在视口中显示了 3 个图像的一部分，因此 bxSlider 没有在正确的时间预渲染左/右“溢出”或“无缝”图像。更改displaySlideQty为 3 有效，并且幻灯片可以无限循环。
$("#slider").bxSlider({\n moveSlides: 1,\n displaySlideQty: 2,\n responsive: false,\n infiniteLoop: true\n});\n| 归档时间： |
|
| 查看次数： |
13072 次 |
| 最近记录： |