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

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

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

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

网站可以在这里看到。

目前，下面的代码正在触发插件（我确信当它被破坏并在屏幕重新resize后重新设置时会有一些挥之不去的注入的css或等效物将它全部抛弃，只是无法将其固定下来。 ..）：

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

任何有关这方面的帮助将不胜感激:-)

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