Responsive full-sized carousel with carouFredSel.js

Question

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

I also use Bootstrap 3, but could not achieve the same behavior, so I decided to go with the plugin.

The problem I am facing is to revoke the carousel. The plugin has the ability to make it responsive by adding the parameter "responsive: true" to the parameters, but when I do this, it breaks the layout.

My placeholder image code can be found at http://jsfiddle.net/vUCZ8/ . I would recommend to see the full result on the screen 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 right way to implement responsive with this plugin:

 responsive: true // you must add this 

As you can see, it does not break and works fine. http://jsfiddle.net/3mypa/ This is due to the STANDARD pattern.

I believe that you are looking for a different template, is not that what you are looking for?

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

Answer 2

I also addressed this issue, and the best I have found is to monitor the window size and react accordingly. for instance

 $(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 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 method, when the window size is below the width of the images, and the reacting action should begin with it, but if it is more than one image, it again returns to the truncated form.

Admittedly, this can lead to increased porting costs, but you must give you the right foundation for the job.