הוספת אנימציות ל Slick Slider עם animate.css

זה יהיה פוסט קצר וקולע. אם אינכם מכירים את Slick Slider – זוהי ספריית Javascript המאפשרת ליצור סליידרים / קרוסלות בצורה מאד נוחה. כתבתי מאמר על השימוש ב Slick Slider ואתם מוזמנים לתת מבט אם אינכם מכירים.

בפוסט זה נראה כיצד להוסיף אנימציות שונות לסליידרים של Slick באמצעות Animate.css, וזאת מכיוון ו Slick מאפשרת כברירת מחדל רק שני סוגים של אנימציות לסליידרים: Fade & Slide.

אז נאמר והוספתם סליידר באמצעות ה HTML הבא:

<div class="savvy-slick-carousel">
    <div class="slick-img"><img src="IMAGE URL" alt="Slick Image 1" /></div>
    <div class="slick-img"><img src="IMAGE URL" alt="Slick Image 2" /></div>
    <div class="slick-img"><img src="IMAGE URL" alt="Slick Image 3" /></div>
    <div class="slick-img"><img src="IMAGE URL" alt="Slick Image 4" /></div>
</div>

קוד ה Javascript להפעלת הסליידר נראה כך:

$('.savvy-slick-carousel').slick({
    dots: false,
    infinite: true,
    speed: 420,
    autoplay: true,
    autoplaySpeed: 4200,
    slidesToShow: 1,
    fade: true,
    slidesToScroll: 1,
    rtl: true
});

התוצאה היא כזו:

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

בואו נראה כיצד להגיע לתוצאה הבאה בה התמונות מבצעות ZoomOut ו FadeOut ביציאה ZoomIn ו FadeIn בכניסה בהתאמה כבדוגמה הבאה:

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

בצעו Enqueue ל Animate.css בדרך המקובלת. אם אינכם יודעים כיצד לעשות זאת (כמו גם כיצד לבצע Enqueue לספרייה Slick) תנו מבט בפוסט הוספת נכסים (Js,Css) באתרי וורדפרס.

שימוש ב Animate.css עבור אנימציות שונות בסליידר

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

את אותם קלאסים של Fade ו Zoom נוסיף באמצעות Javascript בדיוק בזמן התחלופה של הסלייד ואת הקלאס של animated ניתן להוסיף כבר ב HTML של הסליידר מכיוון וזה קבוע ואינו משתנה.

אז ה HTML של הסליידר נראה כך:

<div class="savvy-slick-carousel">
    <div class="slick-img animated"><img src="IMAGE URL" alt="Slick Image 1" /></div>
    <div class="slick-img animated"><img src="IMAGE URL" alt="Slick Image 2" /></div>
    <div class="slick-img animated"><img src="IMAGE URL" alt="Slick Image 3" /></div>
    <div class="slick-img animated"><img src="IMAGE URL" alt="Slick Image 4" /></div>
</div>

הפעלת הסליידר תראה בצורה הבאה:

var slides = $('.savvy-slick-carousel > div');

$('.savvy-slick-carousel').slick({
    dots: false,
    infinite: true,
    speed: 0,
    autoplay: true,
    autoplaySpeed: 4200,
    slidesToShow: 1,
    fade: true,
    slidesToScroll: 1,
    rtl: true
}).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    slides.removeClass('fadeInUp fadeOutUp zoomOut zoomIn');
    slides.eq(currentSlide).addClass('fadeOutUp zoomOut');
    slides.eq(nextSlide).addClass('fadeInUp zoomIn');
});

שימו לב כי עליכם לשנות את הפרמטר speed במקרה זה ל-0 כפי שמופיע בשורה 6.

בקוד זה אנו מכניסים את האלמנטים של כל סלייד וסלייד למשתנה בשם slides, ובכדי להוסיף (ולהסיר) את הקלאסים הרלוונטים עבור כל סלייד – השתמשנו ב Event של Slick Slider הנקרא beforeChange ו Event זה מתבצע בדיוק לפני שסלייד מתחלף.

מעבר לכך, באמצעות הפונקציות addClass ו removeClass של jQuery אנו מסירים את הקלאסים המדוברים מהסלייד הנוכחי, ומוסיפים את הרלוונטים לסלייד הבא.

שימו לב לאפקט עם סליידים המציגים טקסט

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

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

זהו…. אם אהבתם את הפוסט אתם מוזמנים לתת מבט הפוסט על יצירת סליידרים באמצעות Vegas Slider שהיא גם ספריית סליידרים מעניינת. תגובות ורעיונות יתקבלו בברכה…. 🙂