"caroufredsel" jQuery轮播的响应性问题 [英] Responsiveness issue with 'caroufredsel' jquery carousel

问题描述

我已经使用出色的 caroufredsel 制作了一个响应式轮播，该项目应始终一次滚动一个以及流畅的动画.

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

当前，在页面加载(或刷新)时，项目正确滚动(一次滚动)，但是在调整浏览器窗口大小后，按next开始跳过2个或更多项目.如果您随后刷新，则可以解决该问题，直到下一次更改屏幕宽度为止.

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.

此外，动画仅在屏幕处于其最小可能宽度(一次可见1个项目)时才起作用，而在同时可见2个或更多项目时则永远不起作用.

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.

可以在此处看到该站点.

当前，以下代码触发了插件(我确定在屏幕调整大小后销毁并重新设置插件时，会有一些挥之不去的css或等效的css抛出该插件，只是无法固定它下来...):

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

推荐答案

我尚未测试此代码，但可以尝试一下.您对注入的CSS是正确的.轮播再次使用新的内联样式进行包装，但是不会删除以前的包装，这使新包装成为以前的包装的囚徒".

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

这篇关于"caroufredsel" jQuery轮播的响应性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！