Responsive full width carousel with carouFredSel.js - responsive-design

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>

Answer 1

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

Answer 2

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.