Σλάινερ Bootstrap 5
- Προηγούμενη σελίδα BS5 Ναβιγация
- Επόμενη σελίδα BS5 Μοντέλο
Γύρος / Σλάινερ
Ο γύρος (σλάινερ) είναι ένας διαφανής που χρησιμοποιείται για την αναπαραγωγή στοιχείων:
Πώς να δημιουργήσετε έναν γύρο
Το παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε μια βασική σλάινερ με σημάδια και ελέγχους:
Παράδειγμα
<!-- Κινούμενη εικόνα --> <div id="demo" class="carousel slide" data-bs-ride="carousel"> <!-- Σημάδια/πunctuation --> <div class="carousel-indicators"> <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button> <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button> </div> <!-- Σλάινερ/παράδειγμα διαφάνειας --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="la.jpg" alt="Los Angeles" class="d-block w-100"> </div> <div class="carousel-item"> <img src="chicago.jpg" alt="Chicago" class="d-block w-100"> </div> <div class="carousel-item"> <img src="ny.jpg" alt="New York" class="d-block w-100"> </div> </div> <!-- Κεντρικοί ελέγχοι/εικονίδια --> <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev"> <span class="carousel-control-prev-icon"></span> </button> <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next"> <span class="carousel-control-next-icon"></span> </button> </div>
Παράδειγμα εξήγησης
Περιγραφή της λειτουργίας κάθε κλάσης στο παραπάνω παράδειγμα:
Κλάση | Περιγραφή |
---|---|
.carousel |
Δημιουργήστε διαφάνεια. |
.carousel-indicators |
Προσθέστε δείκτες στη διαφάνεια. Είναι οι μικρές μπάλες στο κάτω μέρος κάθε φύλλου διαφάνειας. Παρουσιάζει πόσα φύλλα διαφάνειας υπάρχουν στη διαφάνεια και ποιο φύλλο διαφάνειας εξετάζει ο χρήστης. |
.carousel-inner |
Προσθέστε το φύλλο διαφάνειας στη διαφάνεια. |
.carousel-item |
Ορίζει το περιεχόμενο κάθε φύλλου διαφάνειας. |
.carousel-control-prev |
Προσθέστε ένα κουμπί για ανατροπή αριστερά (προηγούμενο) στη διαφάνεια, επιτρέποντας στον χρήστη να επιστρέψει μεταξύ των φύλλων διαφάνειας. |
.carousel-control-next |
Προσθέστε ένα κουμπί για προώθηση αριστερά (επόμενο) στη διαφάνεια, επιτρέποντας στον χρήστη να προχωρήσει μεταξύ των φύλλων διαφάνειας. |
.carousel-control-prev-icon |
Χρησιμοποιήστε με .carousel-control-prev για να δημιουργήσετε το κουμπί "Προηγούμενο". |
.carousel-control-next-icon |
Χρησιμοποιήστε με .carousel-control-next για να δημιουργήσετε το κουμπί "Επόμενο". |
.slide |
Προσθέστε CSS transition και animation εφέ όταν μεταβαίνετε από ένα έργο στο επόμενο. Αν δεν θέλετε αυτό το αποτέλεσμα, διαγράψτε αυτό το είδος. |
Προσθέστε τίτλο στο φύλλο διαφάνειας
Παρακαλώ προσθέστε τίτλο σε κάθε <div class="carousel-item">
Στο εσωτερικό <div class="carousel-caption">
Προσθέστε στο εσωτερικό, δημιουργήστε τίτλο για κάθε φύλλο διαφάνειας:
Παράδειγμα
<div class="carousel-item"> <img src="beijing.jpg" alt="Πεκίνο"> <div class="carousel-caption"> <h3>Πεκίνο</h3> <p>Ευχαριστώ, Πεκίνο!</p> </div> </div>
- Προηγούμενη σελίδα BS5 Ναβιγация
- Επόμενη σελίδα BS5 Μοντέλο