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

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

Πως δουλεύει

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

Σε προγράμματα περιήγησης όπου υποστηρίζεται το 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…
})