Στροβιλοδρόμιο
Ένα στοιχείο προβολής διαφανειών για ποδήλατο ανάμεσα σε στοιχεία—εικόνες ή διαφάνειες κειμένου—όπως ένα καρουζέλ.
Πως δουλεύει
Το καρουζέλ είναι μια προβολή διαφανειών για ποδήλατο μέσα από μια σειρά περιεχομένου, κατασκευασμένο με μετασχηματισμούς CSS 3D και λίγο JavaScript. Λειτουργεί με μια σειρά από εικόνες, κείμενο ή προσαρμοσμένη σήμανση. Περιλαμβάνει επίσης υποστήριξη για προηγούμενα/επόμενα χειριστήρια και ενδείξεις.
Σε προγράμματα περιήγησης όπου υποστηρίζεται το 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
στο καρουζέλ σας για να δημιουργήσετε κινούμενες διαφάνειες με μετάβαση 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 , το καρουσέλ δεν θα ανακυκλωθεί αυτόματα. |
πληκτρολόγιο | boolean | αληθής | Εάν το καρουζέλ πρέπει να αντιδρά σε συμβάντα πληκτρολογίου. |
παύση | χορδή | boolean | 'φτερουγίζω' | Εάν οριστεί σε Σε συσκευές με δυνατότητα αφής, όταν έχει οριστεί σε |
βόλτα | σειρά | ψευδής | Παίζει αυτόματα το καρουζέλ αφού ο χρήστης ανακυκλώσει με μη αυτόματο τρόπο το πρώτο στοιχείο. Εάν οριστεί σε 'carousel' , αναπαράγει αυτόματα το καρουζέλ κατά τη φόρτωση. |
κάλυμμα | boolean | αληθής | Είτε το καρουζέλ πρέπει να κινείται συνεχώς ή να έχει σκληρές στάσεις. |
αφή | boolean | αληθής | Εάν το καρουζέλ πρέπει να υποστηρίζει αλληλεπιδράσεις ολίσθησης προς τα αριστερά/δεξιά σε συσκευές με οθόνη αφής. |
Μέθοδοι
Ασύγχρονες μέθοδοι και μεταβάσεις
Όλες οι μέθοδοι API είναι ασύγχρονες και ξεκινούν μια μετάβαση . Επιστρέφουν στον καλούντα μόλις ξεκινήσει η μετάβαση αλλά πριν τελειώσει . Επιπλέον, μια κλήση μεθόδου σε ένα στοιχείο μετάβασης θα αγνοηθεί .
Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες .
.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">
).
Τύπος συμβάντος | Περιγραφή |
---|---|
τσουλήθρα.β.καρουσέλ | Αυτό το συμβάν ενεργοποιείται αμέσως όταν slide γίνεται επίκληση της μεθόδου παρουσίας. |
γλίστρησε.β.καρουσέλ | Αυτό το συμβάν ενεργοποιείται όταν το καρουζέλ έχει ολοκληρώσει τη μετάβασή του. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Αλλαγή διάρκειας μετάβασης
Η διάρκεια μετάβασης του .carousel-item
μπορεί να αλλάξει με τη $carousel-transition
μεταβλητή Sass πριν από τη μεταγλώττιση ή προσαρμοσμένα στυλ εάν χρησιμοποιείτε το μεταγλωττισμένο CSS. Εάν εφαρμόζονται πολλαπλές μεταβάσεις, βεβαιωθείτε ότι η μετάβαση μετασχηματισμού έχει οριστεί πρώτα (π.χ. transition: transform 2s ease, opacity .5s ease-out
).