« Previous Next »

What is a Carousel?

A carousel is a user interface component that allows users to cycle through a set of items, such as images or text, usually in a rotating manner. Carousels are often used on websites to showcase content while saving screen space. They can be particularly useful for displaying multiple items in a visually appealing way, without taking up too much space on the page.

Why Use Carousels?

  • Dynamic Display: Carousels allow for multiple items to be displayed in a limited space, making them ideal for showcasing various content types such as images, testimonials, or product offerings.
  • User Engagement: They draw attention to specific actions or items, encouraging user interaction and exploration of content.
  • Responsive Design: Carousels can adapt to different screen sizes, providing a seamless user experience across devices, making them perfect for mobile and desktop views.
  • Highlighting Key Information: Carousels can effectively highlight promotions, news, or important messages that you want to stand out to your visitors.
  • Efficient Use of Space: By presenting content in a rotating format, carousels save valuable screen real estate, which is especially important on mobile devices.

Carousel Code Examples

    
    <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Bootstrap Carousel Examples</title>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
        
          <h2>Image Carousel Example</h2>
          <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
              <div class="carousel-inner">
                  <div class="carousel-item active">
                      <img src="Bird.jpg.jpg" class="d-block w-100" alt="First Slide">
                      <div class="carousel-caption d-none d-md-block">
                          <h5>First Slide Label</h5>
                          <p>This is the description for the first slide.</p>
                      </div>
                  </div>
                  <div class="carousel-item">
                      <img src="sky.jpg" class="d-block w-100" alt="Second Slide">
                      <div class="carousel-caption d-none d-md-block">
                          <h5>Second Slide Label</h5>
                          <p>This is the description for the second slide.</p>
                      </div>
                  </div>
                  <div class="carousel-item">
                      <img src="Rose.jpg.jpg" class="d-block w-100" alt="Third Slide">
                      <div class="carousel-caption d-none d-md-block">
                          <h5>Third Slide Label</h5>
                          <p>This is the description for the third slide.</p>
                      </div>
                  </div>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev" onclick="$('#textCarousel').carousel('prev');">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next" onclick="$('#textCarousel').carousel('next');">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
              </button>
          </div>
          
          <h2>Text Carousel Example</h2>
          <div id="textCarousel" class="carousel slide my-4" data-bs-ride="carousel" data-bs-interval="2000">
              <div class="carousel-inner">
                  <div class="carousel-item active">
                      <div class="d-flex justify-content-center align-items-center" style="height: 200px; background-color: #000000;">
                          <h5 class="text-light">This is the first text slide.</h5>
                      </div>
                  </div>
                  <div class="carousel-item">
                      <div class="d-flex justify-content-center align-items-center" style="height: 200px; background-color: #000000;">
                          <h5 class="text-light">This is the second text slide.</h5>
                      </div>
                  </div>
                  <div class="carousel-item">
                      <div class="d-flex justify-content-center align-items-center" style="height: 200px; background-color: #000000;">
                          <h5 class="text-light">This is the third text slide.</h5>
                      </div>
                  </div>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#textCarousel" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#textCarousel" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
              </button>
          </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
      </body>
    </html>

Output Example

Image Carousel Example

Text Carousel Example

« Previous Next »