Web Design
קרוסלות ב-CSS טבעי בלבד: נפרדים מ-JavaScript עם scroll-marker
נפרדים מספריות JavaScript כבדות לקרוסלות. מדריך פרקטי לבניית גלריות מוצרים קלות, נגישות ומהירות ב-CSS טבעי בלבד עם תכונת scroll-marker.
TL;DR
במשך שנים נאלצנו לטעון ספריות JavaScript כבדות כדי ליצור קרוסלה פשוטה עם נקודות ניווט. ב-2026, תכונת ה-CSS החדשה scroll-marker מאפשרת ליצור גלריות מוצרים מהירות, נגישות וחלקות ב-100% CSS טבעי — ללא שורת קוד אחת של JS.
שנים רבות שילמנו מחיר כבד על אלמנט עיצובי בסיסי. כל גלריית תמונות או קרוסלת מוצרים בחנות אונליין דרשה מאיתנו להעמיס ספריות חיצוניות כמו Swiper, Slick או Embla. הספריות האלה הגיעו עם קבצי JavaScript כבדים, עקבו אחרי אירועי גלילה, חסמו את ה-Main Thread של הדפדפן, וגרמו לתזוזות מבנה מרגיזות בזמן הטעינה. כשבניתי חנות אופנה ללקוח מתל אביב, גיליתי שרבע מזמן הטעינה הראשוני של עמוד המוצר הוקדש רק לאתחול הקרוסלה של תמונות המוצר. זה היה תשלום מוגזם על בסך הכל כמה תמונות שזזות אופקית. כיום, בזכות התפתחות תקני CSS עדכניים, הדפדפנים מטפלים בזה באופן טבעי ושקוף.
למה קרוסלות JavaScript פוגעות בציון האתר שלך
כשספרית JS בונה קרוסלה, היא מבצעת חישובים מורכבים בזיכרון. היא מודדת את רוחב המסך, מחשבת מיקומים של אלמנטים, מצמידה Event Listeners לגלילה, ומזריקה אלמנטים של HTML עבור נקודות הניווט (Dots) או החצים.
הפעילות הזו מייצרת עיכוב בביצועים. מדד INP (Interaction to Next Paint) שנבדק ב-Core Web Vitals נפגע כמעט תמיד מקרוסלות מבוססות JS, בייחוד במכשירים ניידים חלשים. המשתמש מנסה להחליק את התמונה, והמסך
שאלות נפוצות
כל מה שעוד רצית לדעת
האם CSS scroll-marker נתמך בכל הדפדפנים ב-2026?
למה להחליף ספריה מוכחת כמו Swiper או Slick?
איך מטפלים בנגישות מקלדת בקרוסלת CSS?
כתב
אדיר בן יעקב · Adir Ben Yaakov
מקים JustBetterSite, סוכנות בניית אתרים ושיווק דיגיטלי בתל אביב. מתמחה ב-GEO (Generative Engine Optimization) — בנייה של אתרים שמופיעים בתשובות של ChatGPT, Claude, Perplexity ו-Gemini, לא רק בגוגל.
עוד עליי →להמשך הקריאה
מאמרים קשורים
Web Design
CSS contrast-color() מול JavaScript: איך לעצב ממשק דינמי ונגיש ב-2026
השוואה מעשית בין פונקציית contrast-color() ב-CSS לבין פתרונות JavaScript ישנים. גלו איך לייצר ניגודיות נגישה ואוטומטית ללא סקריפטים כבדים.
המשךWeb Design
שבירת מחסום ה-CSS: איך @property משנה את דרך הבנייה של ממשקים דינמיים
מדריך מעשי לשימוש בכלל @property ב-CSS. למדו איך להנפיש משתנים מותאמים אישית (Custom Properties), ליצור אקסטרה דינמיות בממשק ולחסוך בטעינת ספריות JavaScript כבדות.
המשךWeb Design
@starting-style ב-CSS מול ספריות JS: למה הגישה הישנה להנפשת מודאלים מתה
השוואה נוקבת בין הנפשת אלמנטים שנפתחים מ-display: none בעזרת starting-style@ לבין ספריות JS כבדות. גלו למה קוד CSS נקי ב-2026 מנצח כל תוסף.
המשך