我在我的网站上嵌入了带有轮播的柔性滑块。但是,我没有很好地设置滑块的属性(或者可能是CSS),它是这样的。http://www.screencast.com/t/xlRssnj43 http://www.screencast.com/t/xlRssnj43轮播的最后一个图像显示了一半。
虽然我可以点击它,但理想情况下我希望它是这样的:http://www.screencast.com/t/NfOlZdUMQh http://www.screencast.com/t/NfOlZdUMQh始终显示下一个/上一个按钮,并显示 4 个完整图像。第 5 个应该位于下一张幻灯片上。
这是我的 HTML:
<div class="slider">
<div class="flexslider" id="slider">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image5.jpg" /></li>
</ul>
</div>
<!--flexslider-->
<div class="flexslider" id="carousel">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image5.jpg" /></li>
</ul>
</div>
<!--flexslider-->
</div>
这是我的 jquery 代码:
$('.flexslider').each(function() {
var $root = $(this);
// kill item if no image
$root.find("li").each(function(){
var src = $(this).find("img").attr("src");
if(!src){
$(this).remove();
}
});
});
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 91,
itemMargin: 19, //this seems like not working, I also set in css
asNavFor: '#slider',
minItems: 4
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
}
我也把它放在演示页面中:http://ultimatetemplate.businesscatalyst.com/slider http://ultimatetemplate.businesscatalyst.com/slider
有任何想法吗?干杯。