1

I have built a responsive carousel using the excellent caroufredsel, and the items should always scroll one at a time and with fluid animation.

Currently, on page load (or refresh) the items are scrolling correctly (one at a time), but after re-sizing the browser window, pressing next starts to skip over 2 or more items. If you then refresh it fixes the problem until the next change of screen width.

Also, the animation is only working when the screen is at its smallest possible width (1 item visible at a time) and it never works when 2 or more items are visible at the same time.

Site can be seen here.

Currently the following code is triggering the plugin (I am sure that when it is destroyed and re-instated after a screen re-size there is some lingering injected css or equivalent that is throwing it all off, just can't pin it down...):

<script type="text/javascript">

$(document).ready(function() {

$("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 'auto',
scroll: 1,
items : { width : 370, visible : { min : 1, max : 3 } } }); 

});

function doSomething() {

$('#guitars-gallery').trigger('destroy', true);
$('#guitars-gallery').css({'text-align': '','float': '','position': '','top': '','right': '','bottom': '','left': '','width': '90%','height': '','margin': '1% auto'});

$("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 'auto',
scroll: 1,
items : { width : 370, visible : { min : 1, max : 3 } } });

};

var resizeTimer;

$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});
</script>

Any help on this would be greatly appreciated :-)

sth
  • 222,467
  • 53
  • 283
  • 367
Jonathan Garner
  • 206
  • 3
  • 11
  • Perhaps this will help you: http://stackoverflow.com/questions/22461244/responsive-fullscreen-caroufredsel-slideshow – Drew Baker Mar 17 '14 at 17:34

1 Answers1

2

I haven't tested this code but try this. You're right about the injected CSS. The carousel gets wrapped again with with the new inline styles, however the previous wrapper isn't removed, making the new wrapper a 'prisoner' of the previous.

function sliderInit() {
("#guitars-gallery").carouFredSel({
    auto: false,
    circular: false,
    prev: '#prev',
    next: '#next',
    responsive : true,
    height : 'auto',
    scroll: 1,
    items : { 
        width : 370, 
        visible : { 
            min : 1, 
            max : 3 
        } 
    } 
}); 
};

$(window).load(function() {
sliderInit();
}); 

var resizeTimer;

$(window).resize(function() {
$('.caroufredsel_wrapper').removeAttr('style');
$('#guitars-gallery').removeAttr('style');
clearTimeout(resizeTimer);
resizeTimer = setTimeout(sliderReInit, 100);
});
David Rivers
  • 21
  • 2
  • David, I was searching for the same thing, thank you this works as promised! Note: `resizeTimer = setTimeout(sliderReInit, 100)` should be changed to `resizeTimer = setTimeout(sliderInit, 100)`. Cheers, Jeroen – Jeroen W Sep 05 '13 at 11:11
  • Great script, worked like a charm. Note: if you have more than one carouFredSel instance on a page then you have to change this line `$('.caroufredsel_wrapper').removeAttr('style');` to `$('.my_container .caroufredsel_wrapper').removeAttr('style');` where .my_container is the class that the outer container is assigned to – Erik Čerpnjak Aug 26 '15 at 13:23