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>

Solution

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

Comments

[iabramo]

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.

[Yes Barry]

@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"