6

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

我也在使用 Bootstrap 3，但没有成功实现相同的行为，所以这就是我选择使用插件的原因。

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

我的带有占位符图像的代码可以在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>
4

2 回答 2

4

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

responsive: true // you must add this

如您所见，它并没有破坏并且工作正常。http://jsfiddle.net/3mypa/ 这是标准模板。

我相信您正在寻找不同的模板，这不是您正在寻找的吗？

http://coolcarousels.frebsite.nl/c/44/coolcarousel.html

于 2013-08-24T13:42:40.857 回答
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)
})

这样，一旦窗口大小低于图像的宽度并且响应动作应该启动它，但是一旦它再次大于一个图像，它就会移回截断视图。

诚然，为了便携性，它可以整理得更多，但你应该为你提供正确的工作基础。

于 2015-03-18T11:29:48.597 回答