Responsive design 带carouFredSel.js的全宽响应旋转木马

我目前正在使用carouFredSel.js在我的网站上提供全宽旋转木马。我之所以选择这个插件，是因为它具有全宽功能，能够在屏幕的左右边缘部分显示上一个和下一个图像

我也在使用Bootstrap3，但没有成功实现相同的行为，所以我选择使用插件

我遇到的问题是使转盘响应。该插件有一个选项，可以通过在选项中添加“responsive:true”使其具有响应性，但当我这样做时，它会破坏布局

我的带有占位符图像的代码可以在中找到。我建议您在以下位置查看全屏结果：

#简介{
宽度：580px；
保证金：0自动；
}
.包装纸{
背景色：白色；
宽度：480px；
利润率：40px自动；
填充：50px；
盒影：0 0 5px#999；
}
#旋转木马{
显示：块；
浮动：左；
}
.主要内容{
保证金：0；
填充：0；
列表样式：无；
显示：块；
}
.主要内容李{
显示：块；
浮动：左；
}
.主要内容李img{
利润率：0.20px 0.20px；
}
.list_carousel.responsive{
宽度：自动；
左边距：0；
}
.clearfix{
浮动：无；
明确：两者皆有；
}
上一篇{
浮动：左；
左边距：10px；
}
.下一个{
浮动：对；
右边距：10px；
}
.寻呼机{
浮动：左；
宽度：300px；
文本对齐：居中；
}
.寻呼机a{
利润率：0.5px；
文字装饰：无；
}
.寻呼机a.已选定{
文字装饰：下划线；
}
.计时器{
背景色：#999；
高度：6px；
宽度：0px；
}
$（函数（）{
$（'旋转木马'）。旋转木马({
宽度：“100%”，
项目：{
可见：3，
开始：-1
},
滚动：{
项目：1，
持续时间：1000，
超时持续时间：3000
},
上一页：“#上一页”，
下一个：“#下一个”，
分页：{
容器：“#寻呼机”，
偏差：1
}
});
});

这是使用此插件实现响应的正确方法：

responsive: true // you must add this

正如你所看到的，它并没有破裂，工作也不完美。 这是一个标准模板

我相信你正在寻找一个不同的模板，这不是你正在寻找的吗

---

我也一直在研究这个问题，我发现最好的办法就是观察窗口大小并做出相应的反应。比如说

$(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)
})

$（窗口）。调整大小（函数（）{
//侦听窗口大小调整
var时间输出函数；
clearTimeout（TimeOutFunction）；
//尝试并确保只有在窗口停止移动后才会触发
TimeOutFunction=setTimeout（函数（）{
$（'.slides'）。触发器（“destroy”，true）；
//销毁当前旋转木马及其所有设置-极端，但一旦运行，它将不接受设置更改
if（$（窗口）.width（）是的，这是可行的，但是左侧和右侧的部分幻灯片不再显示。您提供的示例不是我想要的。@Ibramo是对的，但这对我来说已经足够好了，可以让我继续并解决其余的问题。请注意那些想知道的人：这确实会使其响应速度加快，但如果需要，您必须调整填充和边距要挑剔。另外，“Responsive”应该像“Responsive”一样小写
$(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)
})