0

私は奇妙なものを持っています。cycle2 を使用したスライドショーがうまく機能します。HTMLで次のように初期化しています:

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

initializedそして、私destroyed

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

次に、使用してウィンドウのサイズ変更を監視する

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

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

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

基本的に、スライドショーがスライドショーで、ブラウザのサイズが 768 未満に変更された場合、スライド ショーは破棄されます (その後、CSS はコンテンツを中継する場合を想定します)。

もう 1 つの状態では、スライドショーが削除されたかどうかを確認し、ブラウザのサイズが 768 を超えてサイズ変更され、サイクルが再初期化されます。

両方のイベントが機能しているように見えます (サイクルのログのように、正しい時間にそれが行われていると言っています[cycle2] cycle-destroyed[cycle2] --c2 init--、再初期化されると機能しません。

何か案は?

4

1 に答える 1