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. בכל מקרה הנה התוצאה:

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

This is just a Slick title

This is just a very very long text
Link >

This is just a Slick title

This is just a very very long text
Link >

This is just a Slick title

This is just a very very long text
Link >

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

רועי יוסף
רועי יוסף

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

2תגובות...
  • אהרון 19 באוקטובר 2021, 22:33

    לצערי Slick זו ספריה ממש ישנה שלא התעדכנה זמן רב. לדוגמה, כל נושא הנגישות בכלל לא בא לידי ביטוי בספריה הזו. הייתי ממליץ לעבור לאחת אחרת. אני אישית משתמש ב-Splide.

    • רועי יוסף 19 באוקטובר 2021, 22:43

      תכלס מבחינת נגישות היא בעייתית, אך זה פחות נוגע למרבית האוכלוסיה. על כל מקרה Splide נראית מגניבה לגמרי! בסליידר הבא שאצור אבדוק אותה… תודה!

השאירו תגובה

 

Up!
לבלוג