יצירת סליידר מתמשך ואינסופי עם Splide Slider

במדריך זה נלמד כיצד ליצור סליידר לוגואים רציף (Continuous Logo Slider) באמצעות ספריית ה-JavaScript הפופולרית Splide יחד עם ה Auto-Scroll Extension (תוסף הגלילה האוטומטית) שהיא מספקת.

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

מה נדרש לטובת מדריך זה?

• דפדפן אינטרנט מודרני.
• ידע בסיסי ב-HTML, CSS, ו-JavaScript.
• לטעון את Splide ואת ה- Auto-Scroll Extension. ניתן להוריד אותם מ Splide או לכלול אותם דרך CDN.

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

שלב 1: הוסיפו את Splide בפרויקט שלכם

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

יתן לקשר אותם ישירות מ-CDN, או אם אתם משתמשים ב- WordPress, תוכלו לכלול אותם בתבנית שלכם.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/splide@4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/splide@4/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/splide-extension-auto-scroll@4"></script>

אם אתם משתמשים ב- WordPress, הוסיפו את הקוד הבא לקובץ functions.php של ערכת הנושא  (התבנית) שלכם כדי לכלול את הסקריפטים וסגנונות ה CSS בצורה נכונה:

function enqueue_splide_assets() {
    wp_enqueue_style('splide-css', 'https://cdn.jsdelivr.net/npm/splide@4/dist/css/splide.min.css');
    wp_enqueue_script('splide-js', 'https://cdn.jsdelivr.net/npm/splide@4/dist/js/splide.min.js', array(), false, true);
    wp_enqueue_script('splide-auto-scroll-js', 'https://cdn.jsdelivr.net/npm/splide-extension-auto-scroll@4', array('splide-js'), false, true);
}
add_action('wp_enqueue_scripts', 'enqueue_splide_assets');

שלב 2: הוסיפו את מבנה ה- HTML

צרו את מבנה ה-HTML עבור הסליידר. זה נראה כך:

<div class="splide YOUR_SLIDER_CLASS">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="logo1.png" alt="Logo 1"></li>
      <li class="splide__slide"><img src="logo2.png" alt="Logo 2"></li>
      <!-- Add more logos as needed -->
    </ul>
  </div>
</div>

שלב 3: הפעילו את Splide

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

document.addEventListener('DOMContentLoaded', function () {
    let splide = new Splide('.YOUR_SLIDER_CLASS', {
        perPage: 4,
        type: 'loop',
        pagination: false,
        speed: 860,
        arrows: false,
        direction: 'rtl',
        lazyLoad: "nearby",
        drag: 'free',
        focus: 'center',
        autoScroll: {
            speed: -0.5,
            pauseOnHover: false,
        },
        mediaQuery: 'min',
        breakpoints: {
            1123: {
                perPage: 6,
                autoScroll: {
                    speed: 0.5,
                },
            },
        }
    });

    splide.on('ready', function () {
        document.querySelector('.YOUR_SLIDER_CLASS').classList.add('is-active');
    });

    splide.mount(window.splide.Extensions);
});

סקריפט זה מוסיף התנהגות דינמית כגון טעינה עצלה, גרירה חופשית, והגדרות שונות לגדלי מסך שונים. הוא גם מבטיח שהמחלקה is-active תתווסף רק לאחר שהסליידר הופעל, כך שהסליידר יופיע רק לאחר שייטען במלואו (ניתן להוריד קטע קוד זה).

שימו לב לאפשרות direction: 'rtl' אותה הוספנו בהגדרות הסליידר, בלעדיה כנראה ולא תראו את הסליידר באתרים הבנויים מימין לשמאל כמו עברית או ערבית. הסירו שורה זו עבור אתרים באנגלית וכדומה.

משתמשים ב- WordPress?

אם אתם משלבים את Splide באתר WordPress, מומלץ לשים את סקריפט האתחול בקובץ JavaScript נפרד ולכלול אותו באופן דומה לאופן בו טענתם את הספרייה. זה מבטיח שהסקריפטים שלכם נטענים בסדר הנכון.

function enqueue_splide_init_script() {
    wp_enqueue_script('splide-init-js', get_template_directory_uri() . '/js/splide-init.js', array('splide-js'), false, true);
}
add_action('wp_enqueue_scripts', 'enqueue_splide_init_script');

הוסיפו בקובץ splide-init.js את ה-JavaScript שמשמש לאתחול הסליידר. הפרדה זו שומרת על הסקריפטים שלכם מאורגנים ומבטיחה קוד נקי יותר.

סיכום

בזאת סיימנו, כעת יש לכם סליידר לוגואים יפה רציף ואינסופי. לרשימה מלאה של כל אפשרויות התצורה הזמינות ב-Splide, בקרו בדף האפשרויות של Splide.

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