Question

我使用jQuery Cycle 2和Carousel插件创建了幻灯片。到目前为止一切都那么好，一切都按预期工作，它甚至是流动的。但我希望它能够做出回应。

我在用户的官方Github上找到了一个脚本，但线程不再活动了。我自己尝试编辑它，但到目前为止没有运气。

问题是脚本检查视口并基于视口显示一定数量的幻灯片。这在我刷新页面时有效。但是，当我手动调整页面大小时，脚本变为bezerk并且我不知道原因。不同之处在于carouselVisible：$问题出在initCycle（）; （至少这是我的期望）。

JS是（完整的小提琴）：

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

The fiddle is here.

jQuery Cycle 2 carousel：响应，根据视口显示图像

0 个答案: