קרוסלה
רכיב מצגת לרכיבה על אופניים בין אלמנטים - תמונות או שקופיות של טקסט - כמו קרוסלה.
איך זה עובד
הקרוסלה היא מצגת לרכיבה על אופניים דרך סדרת תוכן, הבנויה עם טרנספורמציות תלת-ממדיות של CSS ומעט JavaScript. זה עובד עם סדרה של תמונות, טקסט או סימון מותאם אישית. זה כולל גם תמיכה בפקדים ומחוונים קודמים/הבאים.
בדפדפנים שבהם נתמך ה-Page Visibility API , הקרוסלה תמנע החלקה כאשר דף האינטרנט אינו גלוי למשתמש (כגון כאשר לשונית הדפדפן אינה פעילה, חלון הדפדפן ממוזער וכו').
prefers-reduced-motion
בשאילתת המדיה. עיין
בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .
לידיעתך, קרוסלות מקוננות אינן נתמכות, וקרוסלות בדרך כלל אינן תואמות לתקני נגישות.
לבסוף, אם אתה בונה את JavaScript שלנו מהמקור, זה דורשutil.js
.
דוגמא
קרוסלות אינן מנרמלות אוטומטית את מידות השקופיות. ככזה, ייתכן שתצטרך להשתמש בכלי עזר נוספים או בסגנונות מותאמים אישית כדי להתאים את גודל התוכן. אמנם קרוסלות תומכות בפקדים ובאינדיקטורים קודמים/הבאים, אך הם אינם נדרשים במפורש. הוסף והתאם אישית כראות עיניך.
.active
יש להוסיף את הכיתה לאחת השקופיות אחרת הקרוסלה לא תהיה גלויה. הקפד גם להגדיר ייחודי id
עבור .carousel
פקדים אופציונליים, במיוחד אם אתה משתמש במספר קרוסלות בעמוד בודד. רכיבי בקרה ומחוון חייבים להיות בעלי data-target
תכונה (או href
עבור קישורים) התואמת id
את .carousel
הרכיב.
שקופיות בלבד
הנה קרוסלה עם שקופיות בלבד. שימו לב לנוכחות של תמונות קרוסלה .d-block
ובעל .w-100
כדי למנוע יישור תמונות ברירת המחדל של הדפדפן.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
עם פקדים
הוספת הפקדים הקודמים והבאים. אנו ממליצים להשתמש <button>
באלמנטים, אך ניתן להשתמש גם <a>
באלמנטים עם role="button"
.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
עם אינדיקטורים
אתה יכול גם להוסיף את המחוונים לקרוסלה, לצד הפקדים.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
עם כיתובים
הוסף כיתובים לשקופיות שלך בקלות עם .carousel-caption
האלמנט בתוך כל .carousel-item
. ניתן להסתיר אותם בקלות ביציאות תצוגה קטנות יותר, כפי שמוצג להלן, עם כלי עזר אופציונליים לתצוגה . אנו מסתירים אותם בהתחלה עם .d-none
ומחזירים אותם למכשירים בגודל בינוני עם .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Crossfade
הוסף .carousel-fade
לקרוסלה שלך כדי להנפיש שקפים עם מעבר דהייה במקום שקופית. בהתאם לתוכן הקרוסלה שלך (למשל, שקופיות טקסט בלבד), ייתכן שתרצה להוסיף .bg-body
או CSS מותאם אישית ל- .carousel-item
s לצורך הצלבה נכונה.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
מרווח אישי
הוסף data-interval=""
ל-a .carousel-item
כדי לשנות את משך הזמן לעיכוב בין רכיבה אוטומטית לפריט הבא.
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
השבת החלקת מגע
קרוסלות תומכות בהחלקה שמאלה/ימינה במכשירי מסך מגע כדי לעבור בין שקופיות. ניתן לבטל זאת באמצעות data-touch
התכונה. הדוגמה למטה גם אינה כוללת את data-ride
התכונה data-interval="false"
ולכן היא אינה פועלת אוטומטית.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
נוֹהָג
באמצעות תכונות נתונים
השתמש בתכונות נתונים כדי לשלוט בקלות במיקום הקרוסלה. data-slide
מקבל את מילות המפתח prev
או next
, אשר משנה את מיקום השקף ביחס למיקומו הנוכחי. לחלופין, השתמש data-slide-to
כדי להעביר אינדקס שקופיות גולמי לקרוסלה data-slide-to="2"
, מה שמעביר את מיקום השקופית לאינדקס מסוים שמתחיל ב- 0
.
התכונה data-ride="carousel"
משמשת לסימון קרוסלה כהנפשה החל מטעינת העמוד. אם אינך משתמש data-ride="carousel"
באתחול הקרוסלה שלך, עליך לאתחל אותה בעצמך. לא ניתן להשתמש בו בשילוב עם אתחול JavaScript מפורש (מיותר ומיותר) של אותה קרוסלה.
דרך JavaScript
התקשר לקרוסלה באופן ידני עם:
$('.carousel').carousel()
אפשרויות
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-interval=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
הַפסָקָה | מספר | 5000 | משך הזמן שיש לעכב בין רכיבה אוטומטית של פריט. אם false , קרוסלה לא תעבור אוטומטית. |
מקלדת | בוליאני | נָכוֹן | האם הקרוסלה צריכה להגיב לאירועי מקלדת. |
הַפסָקָה | מחרוזת | בוליאני | 'לְרַחֵף' | אם מוגדר ל- במכשירים התומכים במגע, כאשר מוגדר ל- |
נסיעה | חוּט | שֶׁקֶר | הפעלה אוטומטית של הקרוסלה לאחר שהמשתמש עובר ידנית על הפריט הראשון. אם מוגדר ל- 'carousel' , מפעיל אוטומטית את הקרוסלה בעת טעינה. |
לַעֲטוֹף | בוליאני | נָכוֹן | האם הקרוסלה צריכה להסתובב ברציפות או שתהיה לה עצירות קשות. |
לגעת | בוליאני | נָכוֹן | האם הקרוסלה צריכה לתמוך באינטראקציות החלקה שמאלה/ימינה במכשירי מסך מגע. |
שיטות
שיטות ומעברים אסינכרוניים
כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .
.carousel(options)
מאתחל את הקרוסלה עם אפשרויות אופציונליות object
ומתחיל לרכוב על אופניים בין פריטים.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
עובר במחזוריות בין פריטי הקרוסלה משמאל לימין.
.carousel('pause')
מונע מהקרוסלה לרכוב על אופניים דרך פריטים.
.carousel(number)
מעביר את הקרוסלה למסגרת מסוימת (מבוסס 0, בדומה למערך). חוזר אל המתקשר לפני שהפריט היעד הוצג (כלומר לפני slid.bs.carousel
התרחשות האירוע).
.carousel('prev')
עובר אל הפריט הקודם. חוזר אל המתקשר לפני שהפריט הקודם הוצג (כלומר לפני slid.bs.carousel
התרחשות האירוע).
.carousel('next')
עוברים לפריט הבא. חוזר אל המתקשר לפני שהפריט הבא הוצג (כלומר לפני slid.bs.carousel
התרחשות האירוע).
.carousel('dispose')
הורס קרוסלה של אלמנט.
.carousel('nextWhenVisible')
אל תעביר את הקרוסלה אל הבאה כאשר הדף אינו גלוי או הקרוסלה או ההורה שלה אינם גלויים. חוזר אל המתקשר לפני שהפריט הבא הוצג (כלומר לפני slid.bs.carousel
התרחשות האירוע).
.carousel('to')
מעביר את הקרוסלה למסגרת מסוימת (מבוסס 0, בדומה למערך). חוזר אל המתקשר לפני שהפריט הבא הוצג (כלומר לפני slid.bs.carousel
התרחשות האירוע).
אירועים
כיתת הקרוסלה של Bootstrap חושפת שני אירועים לחיבור לפונקציונליות הקרוסלה. לשני האירועים יש את המאפיינים הנוספים הבאים:
direction
: הכיוון שבו הקרוסלה מחליקה (או"left"
או"right"
).relatedTarget
: רכיב ה-DOM המוחלף למקומו כפריט הפעיל.from
: האינדקס של הפריט הנוכחיto
: האינדקס של הפריט הבא
כל אירועי הקרוסלה נורים לעבר הקרוסלה עצמה (כלומר לעבר ה- <div class="carousel">
).
סוג אירוע | תיאור |
---|---|
מגלשת.bs.קרוסלה | אירוע זה מופעל מיד כאשר slide שיטת המופע מופעלת. |
slid.bs.carousel | אירוע זה מופעל כאשר הקרוסלה השלימה את מעבר השקופיות שלה. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
שנה את משך המעבר
.carousel-item
ניתן לשנות את משך המעבר של עם $carousel-transition
המשתנה Sass לפני הידור או סגנונות מותאמים אישית אם אתה משתמש ב-CSS המהודר. אם מוחלים מעברים מרובים, ודא שמעבר ההמרה מוגדר תחילה (למשל transition: transform 2s ease, opacity .5s ease-out
).