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 会中继出 contnet）。

另一种状态询问幻灯片是否已被破坏，并且浏览器的大小调整为 768 以上以重新初始化循环。

这两个事件似乎都在工作（因为在循环日志中说它正在[cycle2] cycle-destroyed并且[cycle2] --c2 init--在正确的时间，但是当它重新初始化时它就不起作用了。

有任何想法吗？

4

1 回答 1

0

事实证明，. cycle()在原始元素上使用不会传递 HTMLdata-值，所以我不得不修改重新初始化

contentslideShowElement.cycle({
    slides: '.slide',
    next: ".cycle-slideshow .next-slide",
    previous: ".cycle-slideshow .previous-slide"
});
于 2014-03-06T10:47:44.813 回答