Trong quá trình phát triển website đã bao giờ bạn gặp phải vấn đề muốn hiển thị nhiều hình ảnh sống động nhưng chưa biết xử lý sao chưa? Nếu có thì Carousel trong Bootstrap 5 chính là thứ bạn đang tìm kiếm. Hãy cùng khám phá cách sử dụng Carousel trong Bootstrap 5 để tạo nên một trang web đẹp với những hình ảnh hấp dẫn.

Carousel là một thành phần quan trọng trong Bootstrap 5, mang đến khả năng tạo ra những slideshow động và thu hút trên trang web của bạn. Nó không chỉ là một cách hiển thị hình ảnh mà còn là một công cụ mạnh mẽ để tạo ra trải nghiệm người dùng ấn tượng. Bạn có thể thêm, xóa hoặc chỉnh sửa các slide dễ dàng giúp trang web của bạn luôn mới mẻ và hấp dẫn. Đây là một công cụ bạn không thể bỏ qua nếu muốn website của mình tạo được ấn tượng tốt với người dùng.

>>>Xem thêm các bài viết về Bootstrap 5

Code mẫu về cách sử dụng Carousel để tạo một slideshow với các chỉ báo và nút điều khiển:

<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" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>

	<!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://stringee.com/static/assets/img/social-ebook-14x9.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://stringee.com/static/assets/img/banner-social-1200x628.jpg" class="d-block w-100" alt="...">
    </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" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  
  <div class="container-fluid mt-3">
    <h3>Ví dụ về tạo slide trong Bootstrap 5</h3>
  </div>
</div>

Ví dụ:

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

<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" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>

	<!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://stringee.com/static/assets/img/social-ebook-14x9.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://stringee.com/static/assets/img/banner-social-1200x628.jpg" class="d-block w-100" alt="...">
    </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" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  
  <div class="container-fluid mt-3">
    <h3>Ví dụ về tạo slide trong Bootstrap 5</h3>
  </div>
</div>

</body>
</html>

Cách sử dụng chi tiết của từng class:

Class

Mô tả

.carouselTạo một carousel
.carousel-indicatorsThêm chỉ báo cho carousel. Chúng là những chấm nhỏ nằm ở phía dưới của slide (cho biết số lượng slide có trong carousel và vị trí slide hiện tại)
.carousel-innerThêm slide vào carousel
.carousel-itemNội dung của từng slide
.carousel-control-prevThêm nút xem lại slide trước đó vào carousel, cho phép người dùng quay lại slide vừa xem
.carousel-control-nextThêm nút bên phải hay tiếp theo vào carousel, cho phép người dùng chuyển tiếp giữa các slide
.carousel-control-prev-icon

Được dùng cùng với .carousel-control-prev

để tạo một nút bấm trước đó.

.carousel-control-next-iconĐược dùng với .carousel-control-next để tạo nút bấm tiếp theo.
.slideThêm chuyển tiếp CSS và hiệu ứng động khi chuyển tiếp giữa các mục. Loại bỏ class này nếu bạn không muốn hiệu ứng đó.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Bạn có thể thêm thành phần vào bên trong <div class="carousel-caption"> với từng <div class="carousel-item"> để tạo một chú thích cho từng slide.

Code mẫu:

<div class="carousel-item active">

      <img src="https://stringee.com/static/assets/img/social-ebook-14x9.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption">

            <h3>Ebook TikTok Shop</h3>

            <p>Download now</p>

     </div>

 </div>

Tổng kết

Carousel trong Bootstrap 5 không chỉ là một công cụ hiển thị hình ảnh, mà còn là nguồn động lực sáng tạo. Nó giúp bạn truyền đạt thông điệp và tạo ra trải nghiệm người dùng tuyệt vời trên mọi thiết bị. Đây cũng là một công cụ mạnh mẽ để làm cho trang web của bạn nổi bật. 

>>> Xem thêm các bài viết về Bootstrap 5

Sử dụng Pagination trong Bootstrap 5

Sử dụng Grid System trong Bootstrap

Navbar trong Bootstrap 5

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:

Banner bottom