Στροβιλοδρόμιο

Ένα στοιχείο προβολής διαφανειών για ποδήλατο ανάμεσα σε στοιχεία—εικόνες ή διαφάνειες κειμένου—όπως ένα καρουζέλ.

Σε αυτήν την σελίδα

Πως δουλεύει

Το καρουζέλ είναι μια προβολή διαφανειών για ποδήλατο μέσα από μια σειρά περιεχομένου, κατασκευασμένο με μετασχηματισμούς CSS 3D και λίγο JavaScript. Λειτουργεί με μια σειρά από εικόνες, κείμενο ή προσαρμοσμένη σήμανση. Περιλαμβάνει επίσης υποστήριξη για προηγούμενα/επόμενα χειριστήρια και ενδείξεις.

Σε προγράμματα περιήγησης όπου υποστηρίζεται το 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στο καρουζέλ σας για να δημιουργήσετε κινούμενες διαφάνειες με μετάβαση 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).

Sass

Μεταβλητές

Μεταβλητές για όλα τα καρουζέλ:

$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`	boolean	`true`	Εάν το καρουζέλ πρέπει να αντιδρά σε συμβάντα πληκτρολογίου.
`pause`	χορδή, boolean	`"hover"`	Εάν οριστεί σε `"hover"`, διακόπτει παύση το cycling του carousel on `mouseenter`και συνεχίζει το cycling του carousel on `mouseleave`. Εάν οριστεί σε `false`, η τοποθέτηση του δείκτη του ποντικιού πάνω από το καρουζέλ δεν θα το κάνει παύση. Σε συσκευές με δυνατότητα αφής, όταν έχει οριστεί σε `"hover"`, η ποδηλασία θα σταματήσει `touchend`(όταν ο χρήστης ολοκληρώσει την αλληλεπίδραση με το καρουζέλ) για δύο διαστήματα, προτού συνεχιστεί αυτόματα. Αυτό είναι επιπλέον της συμπεριφοράς του ποντικιού.
`ride`	χορδή, boolean	`false`	Εάν οριστεί σε `true`, αναπαράγει αυτόματα το καρουζέλ αφού ο χρήστης ανακυκλώσει με μη αυτόματο τρόπο το πρώτο στοιχείο. Εάν οριστεί σε `"carousel"`, αναπαράγει αυτόματα το καρουζέλ κατά τη φόρτωση.
`touch`	boolean	`true`	Εάν το καρουζέλ πρέπει να υποστηρίζει αλληλεπιδράσεις ολίσθησης προς τα αριστερά/δεξιά σε συσκευές με οθόνη αφής.
`wrap`	boolean	`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διάστημα

Απενεργοποιήστε το σάρωση με άγγιγμα

Σκοτεινή παραλλαγή

Ετικέτα πρώτης διαφάνειας

Ετικέτα δεύτερης διαφάνειας

Ετικέτα τρίτης διαφάνειας

Προσαρμοσμένη μετάβαση

Sass

Μεταβλητές

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

Επιλογές

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

Εκδηλώσεις

Ατομικό `.carousel-item`διάστημα