我想制作一个非常简单的无缝循环轮播并尝试使用 bxSlider，但我遇到了图像偏离中心的问题。
我有 3 x 1000 像素宽的图像，我想做的就是确保事件图像位于浏览器的中间，另外两个图像在左侧/右侧无限循环，如下所示:
我试过使用负边距技巧(left: 50% 和 margin-left: -500px)但它没有用，bxSlider 很友好疯狂的。
我的代码非常简单，我在这里有一个 fiddle :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%;
}
关于jquery - 使用无缝循环水平居中 bxSlider 轮播的事件图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19784247/