web-dev-qa-db-ja.com

Slick JS、unslick（）で問題を削除

こんにちは、

私は現在作業していて SlickJS Carousel を使用しています。unslick();スニペットを使用してウィンドウの幅が375より大きい場合、いくつかのアイテムを削除しようとしています。

ウィンドウサイズが375未満の場合のようにサイズ変更関数が機能していることがわかります。slick();カルーセルは問題なく表示されます。

誰かが何がうまくいかないのか見ることができたら私に知らせてください。

ありがとうございました。

[〜＃〜] 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'
        });
    }
}
jquerywindow-resize
7
user3999667

これを試して：

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

Ken Wheeler と話し、カップルを読んだ後 Github 問題は次のように見えました wtran 私が探していた答えがありましたが、微調整する必要がありました私の要件に合わせるために、それは最初はほとんどうまくいきました。

ウィンドウのサイズが特定の幅を超えたときに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'
        });
    }
}
6
user3999667