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

i've got strange one. i've got slideshow using cycle2 works great. i'm initialising in 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 initialized , 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 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 slideshow slideshow , browser gets resized below 768 should destroy slide show (then css takes case of relaying out contnet).

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

both events appear working (as in cycles log's saying it's being[cycle2] cycle-destroyed , [cycle2] --c2 init-- @ correct times, when gets reinitialise doesn't work.

any ideas?

turns out using . cycle() on original element doesn't take html data- values across, had amended reinitialise with

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