Bài 11: Sử dụng Carousel trong Bootstrap để làm Slide

Bài 11: Sử dụng Carousel trong Bootstrap để làm Slide

Carousel trong Bootstrap là phần không thể không nhắc đến bởi các trang web hiện đại thời nay đều sử dụng slide để làm header.

Bài 10 chúng ta được tìm hiểu về Card trong Bootstrap để show bài viết, hãy cùng sonnguyenaz.com tiếp tục khám phá các thành phần tiếp theo của Components nhé.

Như các bạn đã biết một Slide sẽ bao gồm những thành phần sau:

  • Hình ảnh
  • Chú thích
  • Nút chuyển slide
  • Nút di chuyển nhanh đến slide
  • Hiệu ứng chuyển slide

Ví dụ sau đây ta sẽ tạo một slide đơn giản sử có sử dụng Carousel trong Bootstrap:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">

    <!-- Example Code -->
    
    <div id="carouselExample" class="carousel slide" style="width: 768px;">
      <div class="carousel-inner">
        <div class="carousel-item">
		   <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
         </div>
        <div class="carousel-item">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
        </div>
        <div class="carousel-item active">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

tao-slide-don-gian-voi-carousel-trong-bootstrap

Như trên thì chúng ta đã tạo được 1 slide bao gồm hình ảnh và nút bấm để chuyển slide.

Cần lưu ý:

  • Bắt buộc phải có thuộc tính active ở một silde nếu không nó sẽ không hiển thị
  • Như ở đoạn code ví dụ trên thì ta đặt id=”carouselExample” thì dưới nút chuyển slide phải gọi đúng tên id: data-bs-target=”#carouselExample”

Tạo nút bấm trỏ đến slide nhất định

Chúng ta có thể tạo ra các nút bấm để di chuyển trực tiếp đến 1 slide nào đó chứ không cần phải bấm nút chuyển liên tục.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
    <div id="carouselExample" class="carousel slide" style="width: 768px;">
	 <div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
	 </div>
      <div class="carousel-inner">
        <div class="carousel-item">
		   <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
         </div>
        <div class="carousel-item">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
        </div>
        <div class="carousel-item active">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả hiển thị 3 nút gạch phía dưới cùng slide, cho phép chúng ta chuyển trực tiếp đến slide chỉ định

tao-nut-di-chuyen-den-slide-duoc-chon

Tạo Caption cho các slide

Caption là nội dung chú thích viết ngắn gọn để người xem hiểu được slide đang nói về điều gì.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
    <div id="carouselExample" class="carousel slide" style="width: 768px;">
	 <div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
	 </div>
      <div class="carousel-inner">
        <div class="carousel-item">
		   <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
			<div class="carousel-caption d-none d-md-block">
			<h5>Slide 1</h5>
			<p>Chào mừng bạn đến với blog của sonnguyenaz.com.</p>
			</div>
         </div>
        <div class="carousel-item">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
		  <div class="carousel-caption d-none d-md-block">
			<h5>Slide 2</h5>
			<p>Sử dụng Button trong Bootstrap để tạo nút</p>
			</div>
        </div>
        <div class="carousel-item active">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
		  <div class="carousel-caption d-none d-md-block">
			<h5>Slide 3</h5>
			<p>Sử dụng Breadcrumb trong Bootstrap</p>
			</div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

tao-caption-hien-thi-chu-thich-slide

Tạo hiệu ứng và tự chuyển cho các slide

Để tạo hiệu ứng khi chuyển slide thì bạn chỉ cần thêm thuộc tính: carousel-fade

Để các silde tự động chuyển trong thời gian nhất định ta có 2 thuộc tính sau:

  • data-bs-ride=”carousel”: nếu sử dụng thì các slide được tự động chuyển và quay vòng
  • data-bs-ride=”true”: Chỉ chạy đến slide cuối và dừng, nếu chạy tiếp thì cần load lại trang
  • data-bs-interval=”time”: mỗi slide có thể được set một thời gian khác nhau

Ví dụ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
    <div id="carouselExample" class="carousel slide carousel-fade" style="width: 768px;" data-bs-ride="carousel">
	 <div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
	 </div>
      <div class="carousel-inner">
        <div class="carousel-item" data-bs-interval="2000">
		   <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
			<div class="carousel-caption d-none d-md-block">
			<h5>Slide 1</h5>
			<p>Chào mừng bạn đến với blog của sonnguyenaz.com.</p>
			</div>
         </div>
        <div class="carousel-item" data-bs-interval="5000">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
		  <div class="carousel-caption d-none d-md-block">
			<h5>Slide 2</h5>
			<p>Sử dụng Button trong Bootstrap để tạo nút</p>
			</div>
        </div>
        <div class="carousel-item active">
          <img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/bai-9-su-dung-button-trong-bootstrap-de-tao-nut.webp">
		  <div class="carousel-caption d-none d-md-block">
			<h5>Slide 3</h5>
			<p>Sử dụng Breadcrumb trong Bootstrap</p>
			</div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <!-- End Example Code -->
  </body>
</html>

Bạn cũng có thể vô hiệu hóa vuốt chạm khi sử dụng màn hình cảm ứng bằng thuộc tính: data-bs-touch=”false”

Lời kết

Với Carousel trong Bootstrap thì bạn tạo ra 1 slide tuyệt đẹp chắc chỉ cần vài phút, chúc các bạn thành công.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *