Cycle2 for Bootstrap 3, destroying cycle on mobile, reinitialising on larger than mobile

Question

I've got a strange one. I've got a slideshow using cycle2 which works great. I'm initialising it in my HTML with:

<div class="content-slide-show cycle-slideshow" data-slides=".slide" data-next=".cycle-slideshow .next-slide" data-previous=".cycle-slideshow .previous-slide">

And I'm watching out for the initialized and destroyed event calls using

var contentslideShowElement = $('.content-slide-show');
contentslideShowElement.on( 'cycle-initialized', function() {
    contentSlideShowInitialized = true;
});
contentslideShowElement.on( 'cycle-destroyed', function() {
    contentSlideShowInitialized = false;
});

Then using watching for window resizing using

$(window).resize(function(){
    destroyContentSlideShowForMobile();
});

function destroyContentSlideShowForMobile(){
    if( contentSlideShowInitialized && $(window).width() < 768 ){
        contentslideShowElement.cycle('destroy');
    }

   if( !contentSlideShowInitialized && $(window).width() > 768 ){
        contentslideShowElement.cycle();
    }
}

Basically if the slideshow is slideshow and the browser then gets resized below 768 it should destroy the slide show (then my CSS takes case of relaying out the contnet).

The other state asks if the slideshow has been destory and the browser gets resized above 768 to reinitialise the cycle.

Both events appear to be working (as in cycles log's are saying it's being[cycle2] cycle-destroyed and [cycle2] --c2 init-- at the correct times, but when it gets reinitialise it just doesn't work.

Any ideas?

Answer 1

Turns out that using . cycle() on the original element doesn't take the HTML data- values across, so I had to amended the reinitialise with

contentslideShowElement.cycle({
    slides: '.slide',
    next: ".cycle-slideshow .next-slide",
    previous: ".cycle-slideshow .previous-slide"
});