我目前正在使用carouFredSel.js在我的网站上提供全宽旋转木马.我选择这个插件是因为它具有全宽度功能,能够在屏幕的左右边缘部分显示上一个和下一个图像.
我也使用Bootstrap 3,但是没有成功实现相同的行为,所以这就是我选择使用插件的原因.
我遇到的问题是让旋转木马响应.该插件有一个选项,通过在选项中添加'responsive:true'来使其响应,但是当我这样做时,它会破坏布局.
我的代码与占位符图像可以在http://jsfiddle.net/vUCZ8/找到.我建议在http://jsfiddle.net/vUCZ8/embedded/result/查看全屏结果
#intro {
width: 580px;
margin: 0 auto;
}
.wrapper {
background-color: white;
width: 480px;
margin: 40px auto;
padding: 50px;
box-shadow: 0 0 5px #999;
}
#carousel img {
display: block;
float: left;
}
.main-content ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.main-content li {
display: block;
float: left;
}
.main-content li img {
margin: 0 20px 0 20px;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix …Run Code Online (Sandbox Code Playgroud)