'caroufredsel' jquery carousel 的响应性问题

Question

我使用出色的 caroufredsel 构建了一个响应式轮播，并且项目应始终一次滚动一个并具有流畅的动画。

目前，在页面加载（或刷新）时，项目正在正确滚动（一次一个），但在重新调整浏览器窗口大小后，按下一步开始跳过 2 个或更多项目。如果您然后刷新它会修复问题，直到下一次更改屏幕宽度。

此外，动画仅在屏幕处于可能的最小宽度（一次可见 1 个项目）时才起作用，并且在同时可见 2 个或更多项目时它永远不会起作用。

网站可以看到here。

目前以下代码正在触发插件（我确信当它被销毁并在屏幕重新调整大小后重新恢复时，有一些挥之不去的注入 css 或等效的东西将它全部扔掉，只是无法固定它下来...）：

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

对此的任何帮助将不胜感激:-)

Answer 1

我没有测试过这段代码，但试试这个。您对注入的 CSS 是正确的。轮播会再次使用新的内联样式进行包装，但不会删除之前的包装器，从而使新的包装器成为前一个包装器的“囚徒”。

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