מצגת רשת היא רצף תמונות או טקסט המורכב מהצגת אלמנט אחד ברצף בפרק זמן מסוים.
להדרכה זו תוכלו ליצור מצגת על ידי ביצוע השלבים הפשוטים הבאים:
כתוב קצת סימון
Slideshow ![]()
![]()
![]()
כתוב סגנונות כדי להסתיר שקופיות והצג שקופית אחת בלבד.
כדי להסתיר את השקופיות עליך לתת להם סגנון ברירת מחדל. זה יכתיב שתציג שקופית אחת רק אם היא פעילה או אם אתה רוצה להציג אותה.
[data-component="slideshow"] .slide { display: none; } [data-component="slideshow"] .slide.active { display: block; }שנה את השקופיות במרווח זמן.
השלב הראשון לשינוי הצגת השקופיות הוא בחירת עטיפת השקופיות ואז השקופיות שלה.
כאשר אתה בוחר את השקופיות עליך לעבור על כל שקופית ולהוסיף או להסיר מחלקה פעילה בהתאם לשקופית שאתה רוצה להציג. ואז פשוט חזור על התהליך לפרק זמן מסוים.
זכור שכשאתה מסיר מחלקה פעילה משקופית, אתה מסתיר אותה בגלל הסגנונות שהוגדרו בשלב הקודם. אבל כשאתה מוסיף מחלקה פעילה לשקופית, אתה מחליף את הסגנון display:none to display:block, כך שהשקופית תוצג למשתמשים.
var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // Apply to all slideshows that you define with the markup wrote slideshows.forEach(initSlideShow); function initSlideShow(slideshow) { var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides var index = 0, time = 5000; slides[index].classList.add('active'); setInterval( () => { slides[index].classList.remove('active'); //Go over each slide incrementing the index index++; // If you go over all slides, restart the index to show the first slide and start again if (index === slides.length) index = 0; slides[index].classList.add('active'); }, time); }