קרוסלה

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

איך זה עובד

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

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

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

לבסוף, אם אתה בונה את JavaScript שלנו מהמקור, זה דורשutil.js .

דוגמא

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

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

שקופיות בלבד

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

עם פקדים

הוספה של הפקדים הקודמים והבאים:

קודם הַבָּא

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

עם כיתובים

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

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

Nulla vitae elit libero, a pharetra augue mollis interdum.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

קודם הַבָּא

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

נוֹהָג

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

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

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

דרך JavaScript

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

$('.carousel').carousel()

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-interval="".

שיטות

.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')

הורס קרוסלה של אלמנט.

אירועים

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

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

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})