קרוסלה

רכיב מצגת לרכיבה על אופניים בין אלמנטים - תמונות או שקופיות של טקסט - כמו קרוסלה.

בעמוד זה

איך זה עובד

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

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

אפקט האנימציה של רכיב זה תלוי prefers-reduced-motionבשאילתת המדיה. עיין בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .

לידיעתך, קרוסלות מקוננות אינן נתמכות, וקרוסלות בדרך כלל אינן תואמות לתקני נגישות.

דוגמא

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

.activeיש להוסיף את הכיתה לאחת השקופיות אחרת הקרוסלה לא תהיה גלויה. הקפד גם להגדיר ערך ייחודי idעבור .carouselפקדים אופציונליים, במיוחד אם אתה משתמש במספר קרוסלות בעמוד בודד. רכיבי בקרה ומחוון חייבים להיות בעלי data-bs-targetתכונה (או hrefעבור קישורים) התואמת idאת .carouselהרכיב.

שקופיות בלבד

הנה קרוסלה עם שקופיות בלבד. שימו לב לנוכחות של תמונות קרוסלה .d-blockובעל .w-100כדי למנוע יישור תמונות ברירת המחדל של הדפדפן.

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

html

<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

עם אינדיקטורים

אתה יכול גם להוסיף את המחוונים לקרוסלה, לצד הפקדים.

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

עם כיתובים

הוסף כיתובים לשקופיות שלך בקלות עם .carousel-captionהאלמנט בתוך כל .carousel-item. ניתן להסתיר אותם בקלות ביציאות תצוגה קטנות יותר, כפי שמוצג להלן, עם כלי עזר אופציונליים לתצוגה . אנו מסתירים אותם בהתחלה עם .d-noneומחזירים אותם למכשירים בגודל בינוני עם .d-md-block.

תווית השקופית הראשונה

חלק מתוכן מייצג מיקום עבור השקף הראשון.

תווית השקופית השנייה

חלק מתוכן מציין מיקום מייצג עבור השקף השני.

תווית שקופית שלישית

חלק מתוכן מציין מיקום מייצג עבור השקף השלישי.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Crossfade

הוסף .carousel-fadeלקרוסלה שלך כדי להנפיש שקפים עם מעבר דהייה במקום שקופית. בהתאם לתוכן הקרוסלה שלך (למשל, שקופיות טקסט בלבד), ייתכן שתרצה להוסיף .bg-bodyאו CSS מותאם אישית ל- .carousel-items לצורך הצלבה נכונה.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

`.carousel-item`מרווח אישי

הוסף data-bs-interval=""ל-a .carousel-itemכדי לשנות את משך הזמן לעיכוב בין רכיבה אוטומטית לפריט הבא.

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

השבת החלקת מגע

קרוסלות תומכות בהחלקה שמאלה/ימינה במכשירי מסך מגע כדי לעבור בין שקופיות. ניתן לבטל זאת באמצעות data-bs-touchהתכונה. הדוגמה למטה גם אינה כוללת את data-bs-rideהתכונה ולכן היא אינה פועלת אוטומטית.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

גרסה כהה

הוסף .carousel-darkלפקדים .carousel, מחוונים וכיתובים כהים יותר. הפקדים הופכו מהמילוי הלבן המוגדר כברירת מחדל עם filterמאפיין ה-CSS. לכיתובים ולפקדים יש משתני Sass נוספים שמתאימים אישית את ה- colorו background-color.

תווית השקופית הראשונה

חלק מתוכן מייצג מיקום עבור השקף הראשון.

תווית השקופית השנייה

חלק מתוכן מציין מיקום מייצג עבור השקף השני.

תווית שקופית שלישית

חלק מתוכן מציין מיקום מייצג עבור השקף השלישי.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

מעבר מותאם אישית

.carousel-itemניתן לשנות את משך המעבר של עם $carousel-transition-durationהמשתנה Sass לפני הידור או סגנונות מותאמים אישית אם אתה משתמש ב-CSS המהודר. אם מוחלים מעברים מרובים, ודא שמעבר ההמרה מוגדר תחילה (למשל transition: transform 2s ease, opacity .5s ease-out).

סאס

משתנים

משתנים עבור כל הקרוסלות:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

משתנים עבור הקרוסלה האפלה :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

נוֹהָג

באמצעות תכונות נתונים

השתמש בתכונות נתונים כדי לשלוט בקלות במיקום הקרוסלה. data-bs-slideמקבל את מילות המפתח prevאו next, אשר משנה את מיקום השקף ביחס למיקומו הנוכחי. לחלופין, השתמש data-bs-slide-toכדי להעביר אינדקס שקופיות גולמי לקרוסלה data-bs-slide-to="2", מה שמעביר את מיקום השקופית לאינדקס מסוים שמתחיל ב- 0.

התכונה data-bs-ride="carousel"משמשת לסימון קרוסלה כהנפשה החל מטעינת העמוד. אם אינך משתמש data-bs-ride="carousel"באתחול הקרוסלה שלך, עליך לאתחל אותה בעצמך. לא ניתן להשתמש בו בשילוב עם אתחול JavaScript מפורש (מיותר ומיותר) של אותה קרוסלה.

דרך JavaScript

התקשר לקרוסלה באופן ידני עם:

const carousel = new bootstrap.Carousel('#myCarousel')

אפשרויות

מכיוון שניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript, אתה יכול להוסיף שם אפשרות ל- data-bs-, כמו ב- data-bs-animation="{value}". הקפד לשנות את סוג המארז של שם האופציה מ" camelCase " ל" kebab -case " כאשר אתה מעביר את האפשרויות באמצעות תכונות נתונים. לדוגמה, השתמש data-bs-custom-class="beautifier"במקום data-bs-customClass="beautifier".

החל מ-Bootstrap 5.2.0, כל הרכיבים תומכים בתכונת נתונים שמורה ניסיוניתdata-bs-config שיכולה להכיל תצורה פשוטה של רכיבים כמחרוזת JSON. כאשר לרכיב יש data-bs-config='{"delay":0, "title":123}'ותכונות data-bs-title="456", הערך הסופי titleיהיה 456ותכונות הנתונים הנפרדות יעקפו ערכים שניתנו ב- data-bs-config. בנוסף, תכונות נתונים קיימות מסוגלות להכיל ערכי JSON כמו data-bs-delay='{"show":0,"hide":150}'.

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
`interval`	מספר	`5000`	משך הזמן שיש לעכב בין רכיבה אוטומטית של פריט.
`keyboard`	בוליאני	`true`	האם הקרוסלה צריכה להגיב לאירועי מקלדת.
`pause`	מחרוזת, בוליאנית	`"hover"`	אם מוגדר ל- `"hover"`, משהה את רכיבת הקרוסלה פועלת `mouseenter`ומחדש את הרכיבה על הקרוסלה `mouseleave`. אם מוגדר ל- `false`, ריחוף מעל הקרוסלה לא ישהה אותה. במכשירים התומכים במגע, כאשר מוגדר ל- `"hover"`, הרכיבה על אופניים תושהה `touchend`(ברגע שהמשתמש יסיים את האינטראקציה עם הקרוסלה) למשך שני מרווחים, לפני שתתחדש אוטומטית. זה בנוסף להתנהגות העכבר.
`ride`	מחרוזת, בוליאנית	`false`	אם מוגדר ל- `true`, הפעלה אוטומטית של הקרוסלה לאחר שהמשתמש עובר באופן ידני על הפריט הראשון. אם מוגדר ל- `"carousel"`, מפעיל אוטומטית את הקרוסלה בעת טעינה.
`touch`	בוליאני	`true`	האם הקרוסלה צריכה לתמוך באינטראקציות החלקה שמאלה/ימינה במכשירי מסך מגע.
`wrap`	בוליאני	`true`	האם הקרוסלה צריכה להסתובב ברציפות או שתהיה לה עצירות קשות.

שיטות

שיטות ומעברים אסינכרוניים

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

עיין בתיעוד JavaScript שלנו למידע נוסף .

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

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

שיטה	תיאור
`cycle`	עובר במחזוריות בין פריטי הקרוסלה משמאל לימין.
`dispose`	הורס קרוסלה של אלמנט. (מסיר נתונים מאוחסנים ברכיב ה-DOM)
`getInstance`	שיטה סטטית המאפשרת לך לקבל את מופע הקרוסלה המשויך לרכיב DOM, אתה יכול להשתמש בה כך: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	שיטה סטטית המחזירה מופע קרוסלה המשויך לרכיב DOM או יצירת מופע חדש למקרה שהוא לא אותחל. אתה יכול להשתמש בו כך: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	עוברים לפריט הבא. חוזר אל המתקשר לפני שהפריט הבא הוצג (למשל, לפני `slid.bs.carousel`שהאירוע מתרחש).
`nextWhenVisible`	אל תעביר את הקרוסלה הבאה כאשר הדף אינו גלוי או הקרוסלה או ההורה שלה אינם גלויים. חוזר אל המתקשר לפני הצגת פריט היעד .
`pause`	מונע מהקרוסלה לרכוב על אופניים דרך פריטים.
`prev`	עובר אל הפריט הקודם. חוזר למתקשר לפני שהפריט הקודם הוצג (למשל, לפני `slid.bs.carousel`שהאירוע מתרחש).
`to`	מעביר את הקרוסלה למסגרת מסוימת (מבוסס 0, בדומה למערך). חוזר אל המתקשר לפני הצגת פריט היעד (למשל, לפני `slid.bs.carousel`התרחשות האירוע).

אירועים

כיתת הקרוסלה של Bootstrap חושפת שני אירועים לחיבור לפונקציונליות הקרוסלה. לשני האירועים יש את המאפיינים הנוספים הבאים:

direction: הכיוון שבו הקרוסלה מחליקה (או "left"או "right").
relatedTarget: רכיב ה-DOM המוחלף למקומו כפריט הפעיל.
from: האינדקס של הפריט הנוכחי
to: האינדקס של הפריט הבא

כל אירועי הקרוסלה נורים לעבר הקרוסלה עצמה (כלומר לעבר ה- <div class="carousel">).

סוג אירוע	תיאור
`slid.bs.carousel`	נורה כאשר הקרוסלה השלימה את מעבר השקופיות שלה.
`slide.bs.carousel`	מופעל מיד כאשר `slide`שיטת המופע מופעלת.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

קרוסלה

איך זה עובד

דוגמא

שקופיות בלבד

עם פקדים

עם אינדיקטורים

עם כיתובים

תווית השקופית הראשונה

תווית השקופית השנייה

תווית שקופית שלישית

Crossfade

.carousel-itemמרווח אישי

השבת החלקת מגע

גרסה כהה

תווית השקופית הראשונה

תווית השקופית השנייה

תווית שקופית שלישית

מעבר מותאם אישית

סאס

משתנים

נוֹהָג

באמצעות תכונות נתונים

דרך JavaScript

אפשרויות

שיטות

שיטות ומעברים אסינכרוניים

אירועים

`.carousel-item`מרווח אישי