Destroy Cycle2 on window resize

Question

I am using http://jquery.malsup.com/cycle2/api/ and I am trying to destroy cycle2 slider on window resize event when I detect mobile device. Unfortunatly it returns the following two errors:

[cycle2] slideshow must be initialized before sending commands; "destroy" ignored

[cycle2] slideshow must be initialized before sending commands; "reinit" ignored

Maybe someone could help, what am I doing wrong? Here is the code:

$(function() {


    var slider = $('.slider').cycle();

    condition = true;

        //destroy onload under condition
    if(condition){
        slider.cycle('destroy');        
    }   

        //destroy on resize 
    $(window).on('resize',function() {              

        condition = true; //Will be function to recondition let´s say it's true by now

        if(condition){

                slider.cycle('destroy');

        } else {            

                slider.cycle('reinit');             

        }

    });

});

Thank you.

score 2 · Answer 1 · edited Feb 12 '15 at 20:16

2

Looks like you're destroying the slider here:

if(condition){
    slider.cycle('destroy');        
}

You could do it like that:

$(function() {

    var $W = $(window),
        slider = $('.slider').cycle();

    $W.on('resize',function() {              

        if ($W.width() < 768) // width of device 
            slider.cycle('destroy');

    });

});

edited Feb 12 '15 at 20:16

Andy

4,901
5
35
57

answered Jan 28 '14 at 14:47

ion

1,033
2
16
46

score 2 · Answer 2 · answered Aug 07 '14 at 17:04

I know this is an old question, but I was trying to figure this out too, and after careful reading of the docs, this is what I came up with.

So I use the data attributes to set my options on my slideshow. I really like this feature.

For simplicity sake, here is my opening cycle2 div

<div data-cycle-carousel-visible="3" 
     data-cycle-carousel-fluid="true" 
     data-cycle-fx="carousel" 
     data-cycle-prev="#carousel-prev" 
     data-cycle-next="#carousel-next"
     class="cycle-slideshow cycle-front-page-slideshow"
>

Notice that I did add the cycle-slideshow class so Cycle2 auto initializes, then I also added another class of cycle-front-page-slideshow just in case I have other slideshows on my site I can target just this one.

My javascript then looks like this.

function check_window_size( opts ){ 
    // Check if the max-width of window is 899px; window.matchMedia is a native javascript function to check the window size.
    var w899 = window.matchMedia( "(max-width: 899px)" );                               

    // if it is max-width of 899px, then set the number of items in the cycle2 carousel slideshow to 2, else show 3
    // to see if it matches, you would use the variable and grab the matches array; this will return true or false if window size is max-width 899px
    if( w899['matches'] ) {
        opts.carouselVisible = 2;   
    }else{
        opts.carouselVisible = 3;   
    }
}

This is where you would target your slideshow (mine using the .cycle-front-page-slideshow class)

// Grab the cycle2 slideshow initialized from the data attributes on the DIV above
$('.cycle-front-page-slideshow').on('cycle-bootstrap', function(e, opts, API) {
    // run the check_window_size function to get initial window size, just in case they are max-width 899px already
    check_window_size( opts );

    // When window is resized, send the options to the check_window_size function so we can manipulate it
    window.onresize = function() {          
        check_window_size( opts );          
    };

});

Also note that if you want to use the Carousel functionality, you must download the cycle2 carousel transition plugin from http://jquery.malsup.com/cycle2/download/

Hope this helps out other people.

Destroy Cycle2 on window resize

2 Answers2