Σλάινερ Bootstrap 5

Γύρος / Σλάινερ

Ο γύρος (σλάινερ) είναι ένας διαφανής που χρησιμοποιείται για την αναπαραγωγή στοιχείων:

Πώς να δημιουργήσετε έναν γύρο

Το παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε μια βασική σλάινερ με σημάδια και ελέγχους:

Παράδειγμα

<!-- Κινούμενη εικόνα -->
<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>

Δοκιμάστε το προσωπικά