Destroy Cycle2 on window resize

Я использую http://jquery.malsup.com/cycle2/api/, и я пытаюсь уничтожить слайдер cycle2 при событии изменения размера окна, когда обнаруживаю мобильное устройство. К сожалению, он возвращает следующие две ошибки:Destroy Cycle2 on window resize

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

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

Возможно, кто-то может помочь, что я делаю неправильно? Вот код:

$(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');    

     } 

    }); 

});

спасибо.

источник

2013-11-20 devjs11

Похоже, вы разрушив ползунок здесь:

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

Вы могли бы сделать это так:

$(function() { 

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

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

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

    }); 

});

источник

2014-01-28 14:47:37 ion

Я знаю, что это старый вопрос, но я пытался понять это тоже, и после тщательного прочтения документов, это то, что я придумал.

Поэтому я использую атрибуты данных для установки своих параметров в своем слайд-шоу. Мне очень нравится эта функция.

Для простоты, здесь мое открытие cycle2 ДИВ

<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" 
>

Обратите внимание, что я добавить цикл-слайд-шоу класс так Cycle2 автоматически инициализирует, я также добавил еще один класс цикла передней страницы-слайд-шоу на всякий случай, если у меня есть другие слайд-шоу на моем сайте, я могу настроить только этот.

Тогда мой javascript выглядит следующим образом.

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; 
    } 
}

Здесь вы предназначаться слайд-шоу (мину с помощью .cycle-первой странице-слайд-шоу класс)

// 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);   
    }; 

});

Также обратите внимание, что если вы хотите, чтобы использовать функциональные возможности Carousel, вы должны загрузите плагин перехода с каруселем цикла2 от http://jquery.malsup.com/cycle2/download/

Надеюсь, что это поможет другим людям.

источник

2014-08-07 17:04:33

Destroy Cycle2 on window resize

ответ

Смежные вопросы