Unslick בנקודת שבירה מסויימת ואיתחול מחדש בעת הצורך (Slick Slider)

בפוסט זה נראה כיצד להשתמש בפונקציה unslick שהספרייה Slick Slider מספקת. הפונקציה unslick מאפשרת לנו לבטל את הפונקציונליות של הסליידר בנקודת שבירה (breakpoint) מסויימת, ואת זו ניתן לקבוע כשאנו מאתחלים את הקרוסלה תחת אפשרות ה responsive. זה נראה כך:

$('.slider').slick({
    dots: true,
    arrows: false,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    mobileFirst: true,
    slidesToScroll: 1,
    draggable: true,
    centerMode: true,
    centerPadding: '30px',
    responsive: [
    {
            breakpoint: 992,
            settings: "unslick"
        }

        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    ]
});

הקוד מעלה יגרום לביטול הסליידר כשרוחב המסך גדול מ 992px בדיוק כפי שרצינו. אך לצערינו slick אינה יודעת לאתחל מחדש עצמאית את הסליידר לאחר שהוא בוטל. כלומר אם נפתח את העמוד ברוחב קטן מ 992px, ואז נגדיל את המסך מעל לנקודת שבירה זו – הסליידר יתבטל כצפוי. אך אם נקטין את המסך שוב לאחר מכן הסליידר עדיין יהיה מבוטל.

אם אתם תוהים מדוע slick מבטלת את הסליידר מעל 992px ולא מתחת כבדרך כלל התשובה היא הפרמטר mobileFirst: true.

לכן, במצב זה עלינו לבצע אתחול מחדש של הספרייה באותה נקודת שבירה מדוברת, וזאת נעשה על ידי הכנסת הפרמטרים של slick לתוך משתנה. לאחר מכן נבדוק את רוחב המסך בכל שינוי שמתבצע (resize event), וכשנגיע לנקודת השבירה שקבענו – נאתחל את הסליידר מחדש.

הקוד יהיה בסגנון הבא:

const settings = {
    dots: true,
    arrows: false,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    mobileFirst: true,
    slidesToScroll: 1,
    draggable: true,
    centerMode: true,
    centerPadding: '30px',
    responsive: [
        {
            breakpoint: 992,
            settings: "unslick"
        }

        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    ]
};

const sl = $('.slider').slick(settings);

$(window).on('resize', function () {
    if ($(window).width() < 992 && !sl.hasClass('slick-initialized')) {
        $('.slider').slick(settings);
    }
});

וזו תהיה התוצאה. הקטינו את רוחב הדפדפן בכדי לראות כיצד הסליידר נכנס לפעולה כשאנו מגיעים ל 992px, הלא היא נקודת השבירה אותה קבענו בשורה 27. בכל מקרה הנה התוצאה:

לצופים במכשירי מובייל – בכדי לראות את השינוי תאלצו לצפות בדוגמה בדסקטופ ולשנות את רוחב הדפדפן.

עד כאן. אם אינכם מכירים את הספרייה אגב, תנו מבט בפוסט שכתבתי על Slick Slider המסביר כיצד להשתמש בה.