Javascript jQuery Cycle 2转盘：响应迅速，基于视口显示图像

我使用jQuery Cycle 2和Carousel插件创建了一个幻灯片。到目前为止，一切正常，甚至是流动的。但我希望它也能做出反应

我在一个用户的官方Github上发现了一个脚本，但该线程不再处于活动状态。我试着自己编辑，但到目前为止运气不好

问题是脚本检查视口，并根据视口显示一定数量的幻灯片。当我刷新页面时，这是有效的。但是，当我手动调整页面大小时，脚本会变成bezerk，我不知道为什么。区别在于carouselVisible:$问题在initCycle（）中；（至少这是我所期望的）

JS是（下面是完整的小提琴）：

//响应式幻灯片放映
函数initCycle（）{
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
$（“.slideshow”）.循环({
手动速度：500，
超时：0，
幻灯片：“李”，
下一个：“#next4”，
上一篇：“#上一篇4”，
pagerActiveClass:“已选择”，
页面模板：“”，
fx:‘旋转木马’，
旋转游览：2，
旋转木马偏移：20，
旋转木马流体：真的
});
}否则如果（宽度>768和宽度<980）{
$（“.slideshow”）.循环({
手动速度：500，
超时：0，
幻灯片：“李”，
下一个：“#next4”，
上一篇：“#上一篇4”，
pagerActiveClass:“已选择”，
页面模板：“”，
fx:‘旋转木马’，
旋转游览：3，
旋转木马偏移：20，
旋转木马流体：真的
});
}否则{
$（“.slideshow”）.循环({
手动速度：500，
超时：0，
幻灯片：“李”，
下一个：“#next4”，
上一篇：“#上一篇4”，
pagerActiveClass:“已选择”，
页面模板：“”，
fx:‘旋转木马’，
旋转游览：4，
旋转木马偏移：20，
旋转木马流体：真的
});
}
}
initCycle（）；
函数reinit_cycle（）{
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
$（'.slideshow'）。循环（'destroy'）；
再注射周期（2）；
}否则如果（宽度>768和宽度<980）{
$（'.slideshow'）。循环（'destroy'）；
再注射周期（3）；
}否则{
$（'.slideshow'）。循环（'destroy'）；
再注射周期（4）；
}
}
函数重新输入循环（可访问幻灯片）{
$（“.slideshow”）.循环({
手动速度：500，
超时：0，
幻灯片：“李”，
下一个：“#next4”，
上一篇：“#上一篇4”，
pagerActiveClass:“已选择”，
页面模板：“”，
fx:‘旋转木马’，
旋转可视：可视幻灯片，
旋转木马流体：真的
});
}
var-reinitTimer；
$（窗口）。调整大小（函数（）{
clearTimeout（reinitTimer）；
Reinitimer=设置超时（reinit_循环，100）；
});

---

我有几个问题，并清理了代码。它正在工作。似乎无处不在，但iOS除外。尤其是iOS5不断扩展/刷新。有人知道该怎么做吗？你试过看这里的代码吗，我想这和你想做的是一样的。我自己还不确定它是否在iOS中遇到同样的问题，但希望它能有所帮助。是的，我做到了。似乎iOS5在$（window）.resize（function（））方面存在问题，至少在本例中是这样。欢迎您提出任何建议。@mat，我也使用了您的代码。可以进行改进；仅在幻灯片数量发生变化时销毁旋转木马。

        // Responsive Slideshow
    function initCycle() {
        var width = $(window).width(); 
        if (width < 768) {
            $(".slideshow").cycle({
                manualSpeed: 500,
                timeout: 0,
                slides: 'li',
                next: '#next4',
                prev: '#prev4',
                pagerActiveClass: 'selected',
                pagerTemplate: '',
                fx: 'carousel',
                carouselVisible: 2,
                carouselOffset: 20,
                carouselFluid: true
            });
        } else if (width > 768 && width < 980) {
            $(".slideshow").cycle({
                manualSpeed: 500,
                timeout: 0,
                slides: 'li',
                next: '#next4',
                prev: '#prev4',
                pagerActiveClass: 'selected',
                pagerTemplate: '',
                fx: 'carousel',
                carouselVisible: 3,
                carouselOffset: 20,
                carouselFluid: true
            });
        } else {
            $(".slideshow").cycle({
                manualSpeed: 500,
                timeout: 0,
                slides: 'li',
                next: '#next4',
                prev: '#prev4',
                pagerActiveClass: 'selected',
                pagerTemplate: '',
                fx: 'carousel',
                carouselVisible: 4,
                carouselOffset: 20,
                carouselFluid: true
            });
        }
    }
    initCycle();

    function reinit_cycle() {
        var width = $(window).width(); 
        if (width < 768) {
            $('.slideshow').cycle('destroy');
            reinitCycle(2);
        } else if (width > 768 && wWidth < 980) {
            $('.slideshow').cycle('destroy');
            reinitCycle(3);
        } else {
            $('.slideshow').cycle('destroy');
            reinitCycle(4);
        }
    }
    function reinitCycle(visibleSlides) {
         $(".slideshow").cycle({
            manualSpeed: 500,
            timeout: 0,
            slides: 'li',
            next: '#next4',
            prev: '#prev4',
            pagerActiveClass: 'selected',
            pagerTemplate: '',
            fx: 'carousel',
            carouselVisible: visibleSlides,
            carouselFluid: true
        });
    }
    var reinitTimer;
    $(window).resize(function () {
        clearTimeout(reinitTimer);
        reinitTimer = setTimeout(reinit_cycle, 100);  
    });