Bootstrap 5: Carousel

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Καρουζέλ/Παρουσίαση

Το Carousel είναι ένα slideshow για ποδήλατο μέσα από στοιχεία:

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

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

Παράδειγμα

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators/dots -->
  <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>
  <!-- The slideshow/carousel -->
  <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>
  <!-- Left and right controls/icons -->
  <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>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <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>
  
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
    </div>
  </div>
  
  <!-- Left and right controls/icons -->
  <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>

<div class="container-fluid mt-3">
  <h3>Carousel Example</h3>
  <p>The following example shows how to create a basic carousel with indicators and controls.</p>
</div>

</body>
</html>

Το παράδειγμα εξηγείται

Μια περιγραφή του τι κάνει κάθε τάξη από το παραπάνω παράδειγμα:

.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 και ένα εφέ κινούμενων εικόνων κατά την ολίσθηση από το ένα στοιχείο στο άλλο. Καταργήστε αυτήν την κλάση εάν δεν θέλετε αυτό το εφέ

Προσθέστε υπότιτλους στις Διαφάνειες


Προσθέστε στοιχεία μέσα στο <div class="carousel-caption"> σε κάθε <div class="carousel-item"> για να δημιουργήσετε μια λεζάντα για κάθε διαφάνεια:

Παράδειγμα

<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <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>
  
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>We had such a great time in LA!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div> 
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>  
    </div>
  </div>
  
  <!-- Left and right controls/icons -->
  <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>

<div class="container-fluid mt-3">
  <h3>Carousel Example</h3>
  <p>The following example shows how to create a basic carousel with indicators and controls.</p>
</div>

</body>
</html>