[英]flexslider with centered current image
我正在尝试构建一个Flexslider轮播 - 它有多个图像,但当前图像居中,下一个/ prev图像到屏幕外 - 就像这个网站http://www.ncad.ie/
到目前为止,我已经得到了一张图片: http : //jsfiddle.net/Y3kx5/
看看这个声称解决它的其他问题,但我无法让它工作: FlexSlider:居中当前图像
尝试过其他flexslider JS,例如:
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
itemWidth: 800,
minItems: 3,
maxItems: 3
});
但是屏幕上有3个图像 - 而我只希望当前的图像完全在屏幕上,而下一个/ prev显示的只有窗口允许的数量。
在此先感谢.ben。
其实刚刚解决了它:-)
这是最后一篇: http : //jsfiddle.net/Y3kx5/2/
完成CSS:
.container {overflow: hidden; width: 100%}
.flexslider {max-width: 800px; width: 800px; margin: 0 auto}
.content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto}
.flex-viewport {overflow: visible !important}
您可以添加一些CSS规则来更改滑块的方面,并将导航器移动到滑块图像的边界之外。
码:
.content {
background: #f2f2f2;
max-width: 800px;
display: block;
margin: 0 auto
}
.flex-direction-nav .flex-next {
right: 0 !important;
margin-right: -30px;
opacity: 1 !important;
}
.flex-direction-nav .flex-prev {
left: 0 !important;
opacity: 1 !important;
margin-left: -30px;
}
.flexslider {
width: 90%;
margin: 0 auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.