2

I've created a slideshow using jQuery Cycle 2 and the Carousel plugin. So far so good, everything works as it should, it's even fluid. But I would like it to be responsive as well.

I found a script on the official Github by a user, but the thread is not active anymore. I tried to edit it myself, but without luck so far.

The problem is that script checks the viewport and based on the viewport shows a certain amount of slides. This works, when I refresh the page. However, when I resize the page manually, the script goes bezerk and I don't know why. The difference is made by carouselVisible: $ The problem is in initCycle(); (at least that is what I expect).

The JS is (complete Fiddle below):

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

mat
  • 1,619
  • 1
  • 15
  • 25
  • I've several issues and cleaned the code. It's now working. http://jsfiddle.net/kRs2N/6/ – mat May 02 '14 at 08:17
  • Seems to work everywhere, but iOS. Especially iOS5 keeps on scaling / refreshing. Does anyone know what to do? – mat May 05 '14 at 11:14
  • Have you tried looking at the code here, https://github.com/malsup/cycle2/issues/68#issuecomment-19781314, I think this is doing the same thing as you want. Not sure yet myself if it suffers the same issue in iOS but hopefully it helps. – Trevor May 05 '14 at 23:14
  • Yes i did that. It seems that iOS5 has an issue with $(window).resize(function ()) , at least in this example. Any suggestions are welcome. – mat May 07 '14 at 20:00
  • 1
    @mat, I have used your code as well. An improvement can be made; only destroy the carousel when the number of slides has changed. – twicejr Jan 23 '15 at 14:41

0 Answers0