윈도우에서 Cycle2를 파괴하십시오

Question

나는 http://jquery.malsup.com/cycle2/api/을 사용하고 있으며 모바일 장치를 감지하면 윈도우 크기 조정 이벤트에서 cycle2 슬라이더를 파괴하려고합니다. 불행히도 다음과 같은 두 가지 오류가 반환됩니다.

[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');    

     } 

    }); 

}); 

고맙습니다.

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

당신은 그런 식으로 그것을 할 수 있습니다 : 당신이 여기에 슬라이더를 파괴하는 것 같은

Answer 1

은 같은데 나는이 오래된 질문 알고

$(function() { 

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

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

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

    }); 

}); 

Answer 2

을하지만, 나는 이것을 이해하려고 노력했다 밖으로도, 그리고 문서의 신중한 독서 후, 이것은 내가 생각해 낸 것입니다.

그래서 데이터 속성을 사용하여 내 슬라이드 쇼에 내 옵션을 설정합니다. 나는이 기능을 정말 좋아한다. 단순 위해서

, 여기 내 오프닝 cycle2 div의 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" 
> 

공지 사항입니다 다만 나의 위치에 다른 슬라이드 쇼가있는 경우에 나는 이것을 다만 표적으로 할 수있다.

내 자바 스크립트는 다음과 같습니다.

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

이

는

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

}); 

또한주의합니다 (.cycle - 프론트 페이지 슬라이드 쇼 클래스를 사용하여 내) 슬라이드 쇼를 대상으로 할 경우 당신은 회전 목마 기능을 사용하려는 경우, 당신은해야 그 cycle2 회전식 전환 플러그인을 http://jquery.malsup.com/cycle2/download/에서 다운로드하십시오.

다른 사람들에게 도움이되기를 바랍니다.