Question

我使用优秀的caroufredsel构建了一个响应式旋转木马，这些项目应始终一次滚动一个并使用流畅的动画。

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

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

可以看到网站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);
});

与'caroufredsel'jquery旋转木马的响应问题

1 个答案: