Kết nối

[Bootstrap] Phần 23: Carousel

9.965 lượt xem 
 Cập nhật lần cuối: 11/01/2017 lúc 00:23:03
Thể loại: Bootstrap 

Bài viết sẽ hướng dẫn các bạn học cách tạo các Carousel (Slideshow) trong Bootstrap.

Carousel
Carousel là 1 thành phần dùng để duyệt các phần tử (hình ảnh, slide, …) tuần tự xoay vòng, tương tự như 1 slideshow (trình chiếu). Để xây dựng carousel, bạn có thể nhúng tập tin “carousel.js” độc lập hoặc nhúng “bootstrap.js” hay “bootstrap.min.js” có sẵn trong Bootstrap.

Trong ví dụ tiếp theo, chúng ta sẽ học cách tạo 1 carousel đơn giản.
carousel_bootstrap

<div class="container">
<h3>Carousel - dammio.com</h3>
 <div id="myCarousel" style="width:500px" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="frog.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="girl.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="tree.jpg" alt="Flower">
    </div>

  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Trước</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Sau</span>
  </a>
</div>
</div>

Giải thích ví dụ:
Phần tử div ngoài cùng (div id=”myCarousel” style=”width:500px” class=”carousel slide” data-ride=”carousel”) dùng để định nghĩa 1 carousel với chỉ số id=”myCarousel”. Lớp .carousel để mô tả thẻ div này chứa 1 carousel. Lớp .slide để thêm các hiệu ứng động và chuyển tiếp, làm cho 1 đối tượng sẽ có hiệu ứng trượt khi hiển thị mới, nếu bạn không muốn có hiệu ứng này thì bỏ qua không định nghĩa. Thuộc tính data-ride=”carousel” nhằm kích hoạt hiệu ứng hoạt hình sẽ lập tức hoạt động khi trang được tải.
Phần “Indicators” là các chấm nhỏ ở dưới đáy của mỗi slide (chỉ ra có bao nhiêu slide, và slide nào đang được hiển thị. Lớp .carousel-indicators định nghĩa các indicator. Thuộc tính data-target để chỉ đến id của carousel. Thuộc tính data-slide-to mô tả slide nào để được hiển thị nhấn chuột lên hình.
Phần “Wrapper for slides” được định nghĩa bên trong thẻ div với lớp .carousel-inner. Nội dung của mỗi slide sẽ được định nghĩa trong lớp .item, nội dung này có thể là hình ảnh hoặc văn bản. Lớp .active để mô tả slide nào sẽ được hiển thị đầu tiên.
Phần “Left and right controls” là các nút cho phép người dùng xem hình ảnh trước sau khi nhấn chuột lên các nút này. Thuộc tính data-slide cho phép dùng từ khóa “prev” hay “next”, để định nghĩa vị trí tiếp theo của 1 slide dựa vào vị trí của slide hiện tại.

Liên quan:  [Web Colors] Phần 1: Tổng quan về màu sắc trong thiết kế Web

Thêm chú thích vào slide
Để thêm chú thích vào các slide trong 1 carousel, đơn giản là thêm phần tử div class=”carousel-caption” bên trong mỗi phần tử div class=”item” để tạo chú thích cho mỗi slide.
carousel_caption_bootstrap

<div class="container">
<h3>Carousel - dammio.com</h3>
 <div id="myCarousel" style="width:500px" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="frog.jpg" alt="Chania">
	  <div class="carousel-caption">
        <h3>Frog</h3>
        <p>Cóc xanh sống ở rừng Amazon, Brazil</p>
      </div>
    </div>

    <div class="item">
      <img src="girl.jpg" alt="Chania">
	  <div class="carousel-caption">
        <h3>Cô gái</h3>
        <p>Cô gái xinh đẹp sau khi trang điểm</p>
      </div>
    </div>

    <div class="item">
      <img src="tree.jpg" alt="Flower">
	  <div class="carousel-caption">
        <h3>Vòm lá xanh</h3>
        <p>Tận hưởng màu xanh thiên nhiên dưới vòm lá</p>
      </div>
    </div>

  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Trước</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Sau</span>
  </a>
</div>
</div>

Đến đây, bạn đã nắm cách tạo 1 carousel (slideshow) trong Bootstrap. Ngoài ra, có rất nhiều cách để tạo slide cũng như phong cách mới lạ khác nhau, bạn có thể tự khám phá để làm sinh động hơn giao diện trang Web của mình nhé.

Trích dẫn bài viết
  • APA:
    Dammio. (2016). [Bootstrap] Phần 23: Carousel. https://www.dammio.com/2016/11/02/bootstrap-phan-23-carousel.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap] Phần 23: Carousel},
    year = {2016},
    url = {https://www.dammio.com/2016/11/02/bootstrap-phan-23-carousel},
    urldate = {2024-03-15}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x