我目前正在使用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 {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.pager {
float: left;
width: 300px;
text-align: center;
}
.pager a {
margin: 0 5px;
text-decoration: none;
}
.pager a.selected {
text-decoration: underline;
}
.timer {
background-color: #999;
height: 6px;
width: 0px;
}
$(function() {
$('#carousel').carouFredSel({
width: '100%',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000,
timeoutDuration: 3000
},
prev: '#prev',
next: '#next',
pagination: {
container: '#pager',
deviation: 1
}
});
});
<div class="main-content">
<ul id="carousel">
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
</ul>
<div class="clearfix"></div>
</div>
答案 0 :(得分:4)
这是使用此插件实现响应的正确方法:
responsive: true // you must add this
正如您所看到的那样,它并没有打破并且完美运作。 http://jsfiddle.net/3mypa/ 这是使用STANDARD模板。
我相信你正在寻找一个不同的模板,这不是你想要的吗?
答案 1 :(得分:0)
我一直在关注这个问题,我发现最好的是观察窗口大小并做出相应的反应。例如
$(window).resize(function(){
//listens for window resize
var TimeOutFunction;
clearTimeout(TimeOutFunction);
//To try and make sure this only fires after the window has stopped moving
TimeOutFunction=setTimeout(function(){
$('.slides').trigger("destroy",true);
//Destroys the current carousel along with all it's settings - extreme but It wouldn't accept setting changes once running
if($(window).width()<1170){
//The width should be the width of a single image since I assume your using the same image size for all images on the slider.
$(function(){
$('#carousel').find('.slides').carouFredSel({
width:'100%',
items:{
visible:1,
start:-1
},
responsive:true,
minimum:3
})
})
}else{
$(function(){
$('#carousel').find('.slides').carouFredSel({
width:'100%',
items:{
visible:3,
start:-1
},
responsive:false,
minimum:3
})
})
}
},500)
})
这样一旦窗口大小低于图像的宽度并且响应动作应该启动它,但是一旦它大于一个图像,它就会移回到截断的视图。
不可否认,它可以为便携性而整理更多,但是你应该为你提供合适的工作基础。