• Ngày xuất bản:

Hướng dẫn sử dụng Carousel Bootstrap chi tiết kèm ví dụ

carousel bootstrap - itviec blog

Carousel, hoặc Slider, là công cụ giúp trình bày nhiều nội dung theo dạng trượt bắt mắt, thường dùng để hiển thị ảnh, banner hoặc thông điệp nổi bật. Thành phần Carousel Bootstrap cung cấp sẵn thành phần với đầy đủ hiệu ứng, điều hướng và tùy chọn mở rộng, giúp bạn tích hợp dễ dàng vào giao diện web. 

Đọc bài viết này để nắm rõ về:

  • Carousel Bootstrap là gì và khi nào nên sử dụng?
  • Cấu trúc HTML chuẩn và các thành phần phụ
  • Tùy chỉnh hiệu ứng, thời gian chuyển slide, tắt tự động chạy
  • Bài tập thực hành carousel từ cơ bản đến nâng cao

Carousel là một thành phần giao diện cho phép hiển thị nhiều hình ảnh hoặc nội dung trong cùng một vị trí, dưới dạng trình chiếu (slideshow) luân phiên. Thay vì xếp tất cả nội dung xuống dưới dạng danh sách dài, carousel giúp gói gọn thông tin vào một khu vực duy nhất, cho phép người dùng xem lần lượt từng mục bằng thao tác chuyển slide hoặc để nó tự động chạy.

Nhờ hiệu ứng chuyển cảnh mượt mà và khả năng kết hợp nội dung đa dạng (ảnh, văn bản, nút bấm…), carousel đã trở thành một yếu tố quen thuộc trong thiết kế web hiện đại, đặc biệt ở các trang giới thiệu sản phẩm, portfolio hay landing page quảng cáo.

Về mặt giao diện, carousel giúp tiết kiệm đáng kể không gian hiển thị, tạo bố cục gọn gàng nhưng vẫn truyền tải được nhiều thông tin. Nó cũng là một điểm nhấn trực quan, dễ thu hút ánh nhìn của người dùng ngay khi họ vừa truy cập trang.

Về trải nghiệm người dùng, carousel mang lại cảm giác sinh động nhờ chuyển động liên tục, dẫn dắt người xem theo một mạch nội dung nhất định. Các nút điều hướng và chấm tròn chọn slide giúp người dùng kiểm soát trải nghiệm của mình, trong khi chế độ tự động chuyển slide đảm bảo họ không bỏ lỡ thông tin quan trọng.

Carousel trong Bootstrap là component có sẵn, cho phép người dùng tạo carousel nhanh chóng mà không cần viết lại toàn bộ từ đầu. Carousel component tích hợp đầy đủ các tính năng cơ bản của một carousel hiện đại như chuyển slide tự động, điều hướng trái/phải, chấm tròn chỉ định slide, và cả chèn tiêu đề (caption) cho mỗi ảnh.

slider bootstrap - itviec blog

Hình ảnh minh họa carousel trong Bootstrap

Việc dùng Carousel của Bootstrap vừa tiết kiệm thời gian phát triển, vừa đảm bảo tính tương thích trên nhiều thiết bị nhờ thiết kế responsive. Chỉ cần một vài class và thuộc tính đơn giản, bạn đã có thể tùy chỉnh tốc độ, hiệu ứng hoặc giao diện để phù hợp với phong cách của dự án, mà vẫn giữ được trải nghiệm mượt mà và đồng nhất trên desktop, tablet và mobile.

Carousel được sử dụng rộng rãi trong nhiều loại giao diện website khác nhau, đặc biệt là:

  • Trang chủ của website công ty, startup: để hiển thị hình ảnh nổi bật, slogan hoặc thông điệp giới thiệu sản phẩm, dịch vụ.
  • Website thương mại điện tử: dùng để trình bày các sản phẩm nổi bật, chương trình khuyến mãi theo dạng ảnh chuyển động.
  • Landing page: giúp tạo ấn tượng thị giác ban đầu với khách truy cập bằng một carousel bắt mắt.
  • Portfolio cá nhân hoặc agency thiết kế: thể hiện các dự án hoặc sản phẩm nổi bật một cách trực quan.

Carousel trong Bootstrap được xây dựng từ một cấu trúc HTML rõ ràng và có tính phân tầng bao gồm một thẻ một thẻ <div> bao bọc bên ngoài với class “carousel slide”, đi kèm data-bs-ride=“carousel” để kích hoạt tính năng tự động chạy.

   <div class="carousel slide" data-bs-ride="carousel">
     ...
   </div>

Bên trong sẽ bao gồm các slide ảnh nằm trong carousel-inner, mỗi slide là một carousel-item. Slide đầu tiên cần thêm class .active để hiển thị mặc định.

     <div class="carousel-inner">
       <div class="carousel-item active">
         ...
       </div>
       <div class="carousel-item">
         ...
       </div>
     </div>

Ví dụ:

   <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="slide1.jpg" class="d-block w-100" alt="...">
       </div>
       <div class="carousel-item">
         <img src="slide2.jpg" class="d-block w-100" alt="...">
       </div>
     </div>
   </div>

Indicators là những chấm tròn nhỏ nằm dưới carousel, giúp người dùng biết đang xem slide thứ mấy và cho phép chuyển nhanh đến slide bất kỳ. 

Minh họa:

slider bootstrap - itviec blog

Các chấm này được đặt trong thẻ <div> với class carousel-indicators, mỗi chấm tương ứng với một slide thông qua thuộc tính data-bs-slide-to.

Ví dụ cách tạo indicators trong hình minh họa trên:

   <div id="carouselExampleIndicators" class="carousel slide">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
       <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100">
       </div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100">
       </div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100">
       </div>
     </div>
   </div>

Trong đó: Cần đảm bảo thuộc tính data-bs-target có giá trị là id của carousel.

Mặc định, indicators là các hình chữ nhật nhỏ. Nhưng bạn có thể thay đổi kiểu dáng của chúng thông qua CSS. Ví dụ ở code phía trên, bạn có thêm đoạn CSS sau:

<style>
 #carouselExampleIndicators .carousel-indicators [data-bs-target] {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.5);
   margin: 0 6px;
   transition: background-color 0.3s ease;
 }
 #carouselExampleIndicators .carousel-indicators .active {
   background-color: #fff;
 }
</style>

Lúc này, phần indicators sẽ có dạng chấm tròn:

slider bootstrap - itviec blog

Hoặc bạn cũng có thể tạo các thumbnail của từng slide để làm indicators. Ví dụ ở code trên, bạn có thể cập nhật như sau:

       <div id="carouselThumbnails" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 1">
       </div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 2">
       </div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 3">
       </div>
     </div>

     <!-- Thumbnail indicators -->

     <div class="d-flex justify-content-center mt-3 gap-2">
       <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="thumb" data-bs-target="#carouselThumbnails" data-bs-slide-to="0">
       <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="thumb" data-bs-target="#carouselThumbnails" data-bs-slide-to="1">
       <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="thumb" data-bs-target="#carouselThumbnails" data-bs-slide-to="2">
     </div>
   </div>

Sau đó bổ sung thêm CSS và Javascript để định dạng thumbnail và kích hoạt sự kiện khi click vào ảnh thumbnail:

<style>
 .thumb {
 width: 100px;
 height: 60px;
 object-fit: cover;
 cursor: pointer;
 opacity: 0.6;
 border: 2px solid transparent;
 transition: all 0.3s ease;
}
.thumb:hover,
.thumb.active-thumb {
 opacity: 1;
 border-color: #0d6efd;
}
</style>

<script>
 const thumbs = document.querySelectorAll('.thumb');
 thumbs.forEach((thumb, idx) => {
   thumb.addEventListener('click', () => {
     thumbs.forEach(t => t.classList.remove('active-thumb'));
     thumb.classList.add('active-thumb');
   });
 });
</script>

Kết quả:

slider bootstrap - itviec blog

Tóm lại: Việc sử dụng indicators giúp nâng cao trải nghiệm người dùng, đặc biệt khi carousel có nhiều nội dung cần phân trang rõ ràng.

Để người dùng có thể di chuyển thủ công giữa các slide, Bootstrap cung cấp hai nút điều hướng: trái (.carousel-control-prev) và phải (.carousel-control-next). Mỗi nút bao gồm một biểu tượng mũi tên và đoạn văn bản hỗ trợ screen reader (visually-hidden).

slider bootstrap - itviec blog

Ví dụ cách tạo nút điều hướng như hình minh họa trên:

<div id="carouselExampleFade" class="carousel slide carousel-fade">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="..." class="d-block w-100" alt="...">
       </div>
       <div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
       </div>
       <div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
       </div>
     </div>
     <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Next</span>
     </button>
   </div>

Mặc định, Carousel Bootstrap cung cấp hai nút điều hướng nằm hai bên trái/phải slide với icon mũi tên. Tuy nhiên, bạn hoàn toàn có thể thay đổi giao diện của các nút điều hướng theo phong cách riêng bằng cách sử dụng CSS hoặc thay thế icon mặc định bằng text, SVG hoặc bất kỳ phần tử HTML nào khác.

Ví dụ thay đổi icon điều hướng thành văn bản:

Hiển thị chữ “Trước” và “Sau” thay vì mũi tên mặc định bằng cách:

  • Giữ nguyên .carousel-control-prev và .carousel-control-next để đảm bảo chức năng điều hướng.
  • Gỡ bỏ carousel-control-prev-icon và carousel-control-next-icon, thay vào đó dùng span chứa chữ.
}
 .custom-prev {
   left: 10px;
 }
 .custom-next {
   right: 10px;
 }

 </style><div id="carouselTextControls" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100">
</div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100">
       </div>
     </div>

<!-- Custom Text Controls -->

     <button class="carousel-control-prev custom-prev" type="button" data-bs-target="#carouselTextControls" data-bs-slide="prev">
       <span class="custom-arrow">← Trước</span>
     </button>
     <button class="carousel-control-next custom-next" type="button" data-bs-target="#carouselTextControls" data-bs-slide="next">
       <span class="custom-arrow">→ Sau</span>
     </button>
   </div>

<style>
 .custom-arrow {
   font-size: 16px;
   font-weight: bold;
   color: white;
   background-color: rgba(0,0,0,0.6);
   padding: 8px 12px;
   border-radius: 6px;
}
 .custom-prev {
   left: 10px;
 }
 .custom-next {
   right: 10px;
 }
 </style>

Kết quả:

slider bootstrap - itviec blog

Tóm lại: Controls giúp người dùng có toàn quyền kiểm soát việc chuyển slide, đặc biệt hữu ích khi muốn xem lại nội dung trước đó hoặc bỏ qua nhanh slide hiện tại.

Carousel Caption là phần văn bản hiển thị trực tiếp trên ảnh của mỗi slide. Thường dùng để hiển thị tiêu đề, mô tả hoặc lời kêu gọi hành động (CTA). 

slider bootstrap - itviec blog

Để sử dụng caption, ta thêm phần tử <div class=“carousel-caption”> bên trong mỗi carousel-item. Nội dung trong caption có thể là tiêu đề (<h5>), đoạn văn mô tả (<p>) hoặc bất kỳ HTML nào khác.

Ví dụ cách tạo caption như hình minh họa trên:

<div id="carouselCaptionExample" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
           <h5>Tiêu đề Slide 1</h5>
           <p>Thông tin chi tiết dành cho người dùng.</p>
         </div>
       </div>
       <div class="carousel-item">
<img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100">
         <div class="carousel-caption d-none d-md-block">
           <h5>Tiêu đề Slide 2</h5>
           <p>Thông tin chi tiết dành cho người dùng.</p>
         </div>
       </div>
     </div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselCaptionExample" data-bs-slide="prev">
       <span class="carousel-control-prev-icon"></span>
     </button>
     <button class="carousel-control-next" type="button" data-bs-target="#carouselCaptionExample" data-bs-slide="next">
       <span class="carousel-control-next-icon"></span>
     </button>
   </div>

Trong đó:

  • .carousel-caption giúp định vị phần caption ngay bên trong ảnh.
  • Class d-none d-md-block dùng để ẩn caption trên thiết bị nhỏ, chỉ hiển thị từ màn hình md trở lên.

Tóm lại: Nội dung của caption nhằm thu hút sự chú ý của người dùng, giúp cho nội dung carousel trở nên sinh động, có chiều sâu và truyền tải thông điệp rõ ràng hơn.

Bootstrap Carousel không chỉ mạnh mẽ ở phần cấu trúc mà còn rất linh hoạt khi tùy chỉnh. Người dùng có thể dễ dàng thay đổi hiệu ứng chuyển động, điều chỉnh thời gian giữa các slide hoặc bật/tắt tính năng tự động chạy mà không cần viết nhiều JavaScript.

Thêm hiệu ứng chuyển động (Slide vs Fade)

Mặc định, Carousel sử dụng hiệu ứng trượt ngang (slide) khi chuyển đổi giữa các slide. Tuy nhiên, bạn cũng có thể chuyển sang hiệu ứng mờ dần (fade) để tạo cảm giác nhẹ nhàng, tinh tế hơn bằng việc thêm class carousel-fade vào phần tử .carousel.

Ví dụ:

   <div id="carouselFadeExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="..." class="d-block w-100">
       </div>
       <div class="carousel-item">
         <img src="..." class="d-block w-100">
       </div>
     </div>
   </div>

Tùy chỉnh thời gian chuyển slide (data-bs-interval)

Bootstrap cho phép thiết lập khoảng thời gian hiển thị mỗi slide thông qua thuộc tính data-bs-interval, mặc định là 5000 (tức 5 giây). Bạn có thể khai báo data-bs-interval trực tiếp cho carousel để áp dụng thời gian cho toàn bộ slides hoặc từng carousel-item riêng lẻ.

Ví dụ:

   <div id="carouselIntervalExample" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active" data-bs-interval="2000">
         <img src="..." class="d-block w-100">
       </div>
       <div class="carousel-item" data-bs-interval="4000">
         <img src="..." class="d-block w-100">
       </div>
     </div>
   </div>

Trong đó:

  • Slide đầu hiển thị 2 giây
  • Slide tiếp theo hiển thị 4 giây trước khi tự động chuyển

Bật/Tắt tính năng tự động chạy slide

Theo mặc định, Carousel sẽ tự động chuyển slide sau khi hết thời gian hiển thị. Tuy nhiên, bạn hoàn toàn có thể tắt tính năng này bằng cách không thêm data-bs-ride=“carousel” ở thẻ <div class=“carousel slide”>, hoặc sử dụng ride: false trong JavaScript.

Cách 1: Tắt tự động chạy qua HTML

   <div id="carouselManual" class="carousel slide">
     <!-- Không có data-bs-ride -->
     ...
   </div>

Cách 2: Tắt bằng JavaScript (đối với carousel được khởi tạo bằng JavaScript)

<script>
   const myCarousel = document.querySelector('#carouselManual');
   const carousel = new bootstrap.Carousel(myCarousel, {
     interval: false,
     ride: false
   });
</script>

Cách 3: Tắt bằng JavaScript (đối với carousel đã được khởi tạo tự động)

<script>
 // tìm đến carousel cần thao tác
 const el = document.querySelector('#myCarousel');
 const carousel = bootstrap.Carousel.getInstance(el);
 // Sau đó có thể dùng các phương thức:
 carousel.pause();
</script>

Nếu không chắc Carousel đã được khởi tạo hay chưa, hãy dùng getOrCreateInstance:

<script>
   const carousel = bootstrap.Carousel.getOrCreateInstance('#myCarousel', {
     interval: false,
     ride: false,
   });
</script>

Sau khi Carousel đã được khởi tạo, bạn có thể sử dụng các phương thức sau để điều khiển thủ công quá trình chuyển slide bằng JavaScript. Các phương thức này chỉ dùng được sau khi bạn đã có một instance (phiên bản cụ thể) của bootstrap.Carousel.

Ví dụ:

const el = document.getElementById('myCarousel')

const instance_carousel = new bootstrap.Carousel(el)

Lúc này, instance_carousel là một đối tượng đại diện cho Carousel của phần tử #myCarousel, và bạn có thể thao tác với nó thông qua các phương thức sau:

Phương thứcMô tả
next()Chuyển đến slide kế tiếp
prev()Quay về slide trước đó
to(index)Chuyển đến slide theo chỉ số (bắt đầu từ 0)
pause()Tạm dừng chuyển động tự động của Carousel
cycle()Tiếp tục chạy tự động sau khi đã pause()
dispose()Hủy instance và loại bỏ các sự kiện gắn với Carousel
getInstance(element)Trả về instance đã được khởi tạo của phần tử (nếu có)
getOrCreateInstance(element, options)Trả về instance hiện có, hoặc tự động khởi tạo nếu chưa có

Ví dụ: Tạm dừng và chuyển đến slide số 2:

<script>
   const el = document.getElementById('myCarousel')
   const instance_carousel = new bootstrap.Carousel(el)
   instance_carousel.pause()
   instance_carousel.to(2)
</script>

Việc sử dụng JavaScript để điều khiển Carousel rất hữu ích khi bạn cần thêm các nút “Play”, “Pause”, hoặc kết hợp với các điều kiện nâng cao như scroll đến vùng nhìn thấy, hoặc lấy dữ liệu từ API.

Khi triển khai Carousel vào giao diện website, có một số điểm quan trọng bạn cần chú ý để đảm bảo tính tương thích, hiệu năng và trải nghiệm người dùng:

  1. Ảnh nên được tối ưu kích thước: Carousel thường chứa hình ảnh chất lượng cao để hiển thị nổi bật. Tuy nhiên, việc dùng ảnh quá nặng sẽ làm chậm thời gian tải trang, ảnh hưởng đến SEO và trải nghiệm người dùng. Hãy nén ảnh và sử dụng kích thước phù hợp với khung hiển thị.
  2. Đảm bảo khả năng truy cập (accessibility): Mỗi nút điều hướng và chấm tròn indicators cần có thuộc tính aria-label, aria-current để hỗ trợ trình đọc màn hình. Ngoài ra, ảnh trong Carousel nên có alt mô tả nội dung rõ ràng.
  3. Tránh lạm dụng hiệu ứng tự động: Tính năng auto-slide (data-bs-ride=“carousel”) giúp nội dung luôn chuyển động, nhưng nếu người dùng chưa đọc xong hoặc bị thay đổi quá nhanh sẽ gây khó chịu. Nên điều chỉnh data-bs-interval hợp lý (ví dụ 5000ms), hoặc cho phép người dùng tạm dừng carousel bằng thao tác tương tác (hover, click, hoặc có nút “Pause”).
  4. Không nên nhúng quá nhiều nội dung phức tạp vào slide: Mỗi slide nên đơn giản, gọn gàng, chẳng hạn như hình, tiêu đề và mô tả ngắn. Tránh nhúng form, video, hoặc nội dung động quá nhiều vì sẽ gây xung đột, khó kiểm soát và làm tăng tải cho trình duyệt.

Bài tập cơ bản

Tạo một Carousel hiển thị 3 ảnh với hiệu ứng chuyển slide mặc định, mỗi tự động chuyển ảnh sau mỗi 3 giây.

Lời giải Bài tập 1

Sử dụng thuộc tính data-bs-ride=“carousel” để bật tính năng tự động chạy, và dùng class carousel-item để định nghĩa từng slide, ảnh đầu tiên cần thêm class active.

<div id="carouselBasic" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="Slide 1">
     </div>
     <div class="carousel-item">
       <img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="Slide 2">
     </div>
     <div class="carousel-item">
       <img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="Slide 3">
     </div>
   </div>
</div>

Bài tập trung bình

Tạo carousel có nút điều hướng trái/phải và chấm tròn chỉ số slide, slide đầu hiển thị 5 giây, slide thứ 2 hiển thị 3 giây.

slider bootstrap - itviec blog
Lời giải Bài tập 2

Sử dụng carousel-indicators để tạo các chấm điều hướng và carousel-control để thêm nút trái/phải. Đặt data-bs-interval trực tiếp cho từng carousel-item để quy định thời gian riêng cho mỗi slide.

<div id="carouselIntermediate" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#carouselIntermediate" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#carouselIntermediate" data-bs-slide-to="1" aria-label="Slide 2"></button>
       <button type="button" data-bs-target="#carouselIntermediate" data-bs-slide-to="2" aria-label="Slide 3"></button>
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active" data-bs-interval="5000">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 1">
       </div>
       <div class="carousel-item" data-bs-interval="3000">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 2">
       </div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 3">
       </div>
</div>
     <button class="carousel-control-prev" type="button" data-bs-target="#carouselIntermediate" data-bs-slide="prev">
       <span class="carousel-control-prev-icon"></span>
     </button>
     <button class="carousel-control-next" type="button" data-bs-target="#carouselIntermediate" data-bs-slide="next">
       <span class="carousel-control-next-icon"></span>
     </button>
   </div>

Bài tập nâng cao

Tạo carousel có thêm caption và đổi hiệu ứng chuyển slide sang fade.

slider bootstrap - itviec blog
Lời giải Bài tập 3

Thêm class carousel-fade để chuyển hiệu ứng slide thành mờ dần. Dùng carousel-caption để hiển thị tiêu đề và mô tả nằm đè trên ảnh, nên thêm class d-none d-md-block để ẩn caption ở thiết bị nhỏ.

<div id="carouselAdvanced" class="carousel slide carousel-fade" data-bs-ride="carousel">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#carouselAdvanced" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#carouselAdvanced" data-bs-slide-to="1" aria-label="Slide 2"></button>
       <button type="button" data-bs-target="#carouselAdvanced" data-bs-slide-to="2" aria-label="Slide 3"></button>
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 1">
         <div class="carousel-caption d-none d-md-block">
           <h5>Tiêu đề Slide 1</h5>
           <p>Mô tả ngắn gọn cho slide đầu tiên.</p>
         </div>
       </div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 2">
         <div class="carousel-caption d-none d-md-block">
           <h5>Tiêu đề Slide 2</h5>
           <p>Thông tin mô tả cho slide thứ hai.</p>
         </div>
       </div>
       <div class="carousel-item">
         <img src="https://yt3.googleusercontent.com/FbuUhhAlubdj_2xPymAvufoEQWFaIIoEa0gPlWUP05nh-WGN628FkXaMDpl6Y03g46n6ZUQXeQ=s900-c-k-c0x00ffffff-no-rj" class="d-block w-100" alt="Slide 3">
         <div class="carousel-caption d-none d-md-block">
           <h5>Tiêu đề Slide 3</h5>
           <p>Slide cuối cùng với nội dung rõ ràng.</p>
         </div>
       </div>
     </div>
     <button class="carousel-control-prev" type="button" data-bs-target="#carouselAdvanced" data-bs-slide="prev">
       <span class="carousel-control-prev-icon"></span>
     </button>
     <button class="carousel-control-next" type="button" data-bs-target="#carouselAdvanced" data-bs-slide="next">
       <span class="carousel-control-next-icon"></span>
     </button>
   </div>

Từ Bootstrap 5 trở đi, bạn có thể kết hợp thuộc tính loading=“lazy” của HTML cho thẻ <img> để trì hoãn việc tải ảnh cho đến khi chúng gần hiển thị trên màn hình. Điều này giúp cải thiện hiệu suất tải trang, đặc biệt nếu carousel chứa nhiều ảnh nặng.

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="slide1.jpg" class="d-block w-100" alt="..." loading="lazy">
       </div>
       <div class="carousel-item">
         <img src="slide2.jpg" class="d-block w-100" alt="..." loading="lazy">
       </div>
     </div>
   </div>

Lưu ý: Trình duyệt sẽ chỉ áp dụng lazy-load ảnh không nằm trong khung hiển thị ban đầu (viewport), vì vậy slide 1 sẽ luôn tải ngay (dù có loading=“lazy” hay không), slide 2 trở đi nếu chưa được hiển thị, và có loading=“lazy”, thì sẽ được trì hoãn cho đến khi gần được xem.

Bootstrap mặc định không hỗ trợ trực tiếp giới hạn số vòng lặp, tuy nhiên, bạn có thể tự thêm JavaScript để theo dõi số lần chuyển slide, sau đó dùng .pause() để dừng carousel.

<script>
 const carousel = document.querySelector('#myCarousel');
 const carouselInstance = bootstrap.Carousel.getOrCreateInstance(carousel);
 let count = 0;
 const maxCycles = 2;
 let totalSlides = carousel.querySelectorAll('.carousel-item').length;
 carousel.addEventListener('slid.bs.carousel', function () {
   count++;
   if (count >= maxCycles * totalSlides) {
     carouselInstance.pause();
   }
 });
</script>

Trong đó, gán biến maxCycles để điều chỉnh số vòng chạy tối đa của carousel.

Bạn có thể thêm một nút (button) để đóng vai trò là “play/pause”. Sau đó tùy chỉnh cho phép người dùng bật/tắt tự động chuyển slide bằng cách dùng .pause() và .cycle() của Bootstrap Carousel. Ví dụ:

<button id="toggleCarousel" class="btn btn-secondary">Tạm dừng</button>
<script>
 const carouselEl = document.querySelector('#myCarousel');
 const instance = bootstrap.Carousel.getOrCreateInstance(carouselEl);
 const toggleBtn = document.getElementById('toggleCarousel');
 let isPlaying = true;
 toggleBtn.addEventListener('click', () => {
   if (isPlaying) {
     instance.pause();
     toggleBtn.textContent = 'Tiếp tục';
   } else {
     instance.cycle();
     toggleBtn.textContent = 'Tạm dừng';
   }
   isPlaying = !isPlaying;
 });
</script>

Trong đó, #myCarousel là id của carousel cần tương tác.

Tổng Kết

Carousel trong Bootstrap là một thành phần trực quan và linh hoạt, giúp trình bày nội dung theo dạng trình chiếu sinh động, thu hút người dùng và tối ưu không gian hiển thị. Với cú pháp HTML đơn giản, đi kèm các tính năng tùy chỉnh như hiệu ứng chuyển slide, thời gian hiển thị, caption, controls và indicators, carousel hoàn toàn có thể đáp ứng các yêu cầu đa dạng trong giao diện hiện đại.

Qua bài viết này, ITviec hy vọng bạn đã nắm rõ cách sử dụng, tùy biến và xử lý các tình huống thực tế với carousel trong Bootstrap, từ đó áp dụng hiệu quả vào các dự án web của mình.

Chia sẻ bài viết
TAG:
BootstrapChuyên môn IT
TÁC GIẢ
Phạm Hữu Ngọc
Phạm Hữu Ngọc

Software Engineer

Ngọc Phạm – một kỹ sư phần mềm với hơn 5 năm kinh nghiệm, từng tham gia phát triển các dự án đa dạng cho khách hàng tại Mỹ, Nhật Bản và Việt Nam. Với niềm đam mê sáng tạo và tinh thần không ngừng học hỏi, Ngọc luôn tìm kiếm những giải pháp tối ưu, nâng cao chất lượng sản phẩm và sẵn sàng chinh phục những thách thức công nghệ mới. Hiện tại, Ngọc là Software Engineer tại Voyager Inc., chuyên làm việc với Ruby on Rails, Python, ReactJS và NuxtJS. Với nền tảng vững chắc về phát triển web, API backend và frontend hiện đại, Ngọc không chỉ tập trung vào việc xây dựng các ứng dụng mạnh mẽ, linh hoạt mà còn chú trọng đến trải nghiệm người dùng, bảo mật và khả năng mở rộng hệ thống.