Responsiveness issue with 'caroufredsel' jquery carousel

问题

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 :-)

回答1:

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);
});

来源：https://stackoverflow.com/questions/11145041/responsiveness-issue-with-caroufredsel-jquery-carousel

标签

jquery

responsive-design

jcarousel

caroufredsel