SlickJS, unslick() 문제

Question

좋은 오후,

내가 현재 일하고, 나는 창문 폭이 unslick(); 조각을 사용하여보다 큰 375을 때 몇 가지 항목을 제거하기 위해 노력하고있어 SlickJS Carousel 사용하고 제거합니다.

창 크기가 375보다 작 으면 크기 조정 기능이 작동하는 것을 볼 수 있습니다. 아무런 문제없이 회전식 디스플레이가 slick();입니다.

누구나 잘못 알면 나에게 알려주세요.

감사합니다. wtran 내가 찾고있는 대답을했다처럼 나는 그것이 꽤 많은 일을 내 요구 사항에 맞게 조정할 있었지만

은 JS는

$(document).ready(function() { 
    // Header Slider 
    $('.touchslider_one').slick({ 
     autoplay: true, 
     infinite: true, 
     speed: 1500, 
     autoplaySpeed: 3000, 
     dots: false, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     fade: true, 
     cssEase: 'linear', 
    }); 
    onresize(); 
    $(window).resize(function() { 
     onresize(); 
    }); 
}); 
function onresize(){ 
    checkWidth(); 
} 
function checkWidth() { 
    if ($(window).width() < 376) { 
     // Boxes 
     $('.touchslider_fourth').slick({ 
      autoplay: false, 
      infinite: true, 
      speed: 1500, 
      adaptiveHeight: true, 
      dots: false, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      cssEase: 'linear' 
     }); 
     // Featured Products 
     $('.touchslider_three').slick({ 
      autoplay: false, 
      infinite: true, 
      speed: 1500, 
      adaptiveHeight: true, 
      dots: false, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      cssEase: 'linear' 
     }); 
     // Logos 
     $('.touchslider_two').unslick(); 
     $('.touchslider_two').slick({ 
      autoplay: true, 
      infinite: true, 
      speed: 1500, 
      autoplaySpeed: 6000, 
      dots: false, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      cssEase: 'linear' 
     }); 
    } else { 
     // Test 
     console.log('Larger than 375');    

     // Remove 
     $('.touchslider_fourth').unslick(); 
     $('.touchslider_three').unslick(); 
     $('.touchslider_two').unslick(); 
     // Rebuild 
     $('.touchslider_two').slick({ 
      autoplay: true, 
      infinite: true, 
      speed: 1500, 
      autoplaySpeed: 6000, 
      dots: false, 
      slidesToShow: 5, 
      slidesToScroll: 5, 
      cssEase: 'linear' 
     }); 
    } 
} 

Answer 1

Github 문제를 Ken Wheeler과 얘기하고 몇 가지를 읽은 후에는,보고 처음으로.

이제 창이 특정 너비 이상으로 크기가 조정될 때 unslick();을 트리거 할 수 있으며 창 크기가 특정 너비보다 작은 경우 캐 러셀을 다시 작성할 수 있습니다.

트윗과 조언을 얻으려면 Ken Wheeler에게 감사드립니다.

JS

$(document).ready(function() { 
    touchsliderone(); 
    onresize(); 
    $(window).resize(function() { 
     onresize(); 
    }); 
}); 
// Resize 
function onresize() { 
    touchslidertwo(); 
    touchsliderthree(); 
    touchsliderfour(); 
} 
// Header Carousel 
function touchsliderone() { 
    $('.touchslider_one').slick({ 
     autoplay: true, 
     infinite: true, 
     speed: 1500, 
     autoplaySpeed: 3000, 
     dots: false, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     fade: true, 
     cssEase: 'linear', 
    }); 
} 
// Boxes Carousel 
function touchsliderfour() { 
var $touchsliderfour = $('.touchslider_four'); 
    if ($(window).width() < 376) { 
     if($touchsliderfour.hasClass('slick-initialized')) { 
     $touchsliderfour.unslick(); 
     } 
     $touchsliderfour.slick({ 
      autoplay: false, 
      infinite: true, 
      speed: 1500, 
      adaptiveHeight: true, 
      dots: false, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      cssEase: 'linear' 
     }); 
    } else { 
     if($touchsliderfour.hasClass('slick-initialized')) { 
     $touchsliderfour.unslick(); 
     } 
    } 
} 
// Featured Products Carousel 
function touchsliderthree() { 
    var $touchsliderthree = $('.touchslider_three'); 
    if ($(window).width() < 376) { 
     if($touchsliderthree.hasClass('slick-initialized')) { 
     $touchsliderthree.unslick(); 
     } 
     $touchsliderthree.slick({ 
      autoplay: false, 
      infinite: true, 
      speed: 1500, 
      adaptiveHeight: true, 
      dots: false, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      cssEase: 'linear' 
     }); 
    } else { 
     if($touchsliderthree.hasClass('slick-initialized')) { 
     $touchsliderthree.unslick(); 
     } 
    } 
} 
// Logos Carousel 
function touchslidertwo() { 
    var $touchslidertwo = $('.touchslider_two'); 
    if ($(window).width() < 376) { 
     if($touchslidertwo.hasClass('slick-initialized')) { 
     $touchslidertwo.unslick(); 
     } 
     $touchslidertwo.slick({ 
      autoplay: true, 
      infinite: true, 
      speed: 1500, 
      autoplaySpeed: 6000, 
      dots: false, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      cssEase: 'linear' 
     }); 
    } else { 
     if($touchslidertwo.hasClass('slick-initialized')) { 
     $touchslidertwo.unslick(); 
     } 
     $touchslidertwo.slick({ 
      autoplay: true, 
      infinite: true, 
      speed: 1500, 
      autoplaySpeed: 6000, 
      dots: false, 
      slidesToShow: 5, 
      slidesToScroll: 5, 
      cssEase: 'linear' 
     }); 
    } 
} 

Answer 2

이 시도 :

어떤 이유로

$('.your-slider').slick('unslick');