Responsive full width carousel with carouFredSel.js

Question

I am currently using carouFredSel.js to serve up a full width carousel on my site. I chose this plugin because of its full width capabilities with the ability to partially show the previous and next images on the left and right edges of the screen.

I am also using Bootstrap 3, but was unsuccessful achieving the same behavior, so that's why I chose to go with a plugin.

The problem I am experiencing is making the carousel responsive. The plugin has an option to make it responsive by adding 'responsive: true' to the options, but when I do that, it breaks the layout.

My code with placeholder images can be found at http://jsfiddle.net/vUCZ8/. I would recommend looking at the full screen result at 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>

Ignacio Correia · Accepted Answer · 2017-08-30T09:50:34.953

4

This is the correct way to implement responsive with this plugin:

responsive: true // you must add this

As you can see it is not breaking and working perfectly. http://jsfiddle.net/3mypa/ This is with the STANDARD template.

I believe you are searching for a different template, isn't this what you are looking for?

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

edited Aug 30 '17 at 09:50

answered Aug 24 '13 at 13:42

Ignacio Correia

3,611
8
39
68

1

Yes, that works, but then the partial slides to the left and right are no longer showing. The example you provided it not what I am looking for. – iabramo Aug 25 '13 at 15:03
1

@iabramo is right, but this was good enough for me to get me going and figure out the rest. **Note to those wondering**: _this does make it responsive, but you'll have to tweak padding and margins if you want to be picky._ Also, **"Responsive" should be lowercase like "responsive"** – Yes Barry Oct 15 '14 at 00:43

score 0 · Answer 2 · answered Mar 18 '15 at 11:29

I've been looking at this issue as well and the best I've found is to watch for a window size and react accordingly. For example

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

This way once the window size is below the width of the images and the responsive action should kick in it does but once it's larger than one image again it moves back to the truncated view.

Admittedly it could tidied up more for portabilities sake but you that should give you the right basis to work on.

Responsive full width carousel with carouFredSel.js

2 Answers2