Carousel được định nghĩa là thành phần dùng để duyệt các phần tử (hình ảnh, slide, …) tuần tự xoay vòng, Carousel tương tự như 1 slideshow (trình chiếu) . Trong bài viết này chúng ta sẽ tìm hiểu về cách dùng Carousel trong Bootstrap 3 các bạn nhé!
Carousel đơn giản
<div class="container"> <h3>Carousel - Ví Dụ</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="gx1.jpg" alt="gx1"> </div> <div class="item"> <img src="gx2.jpg" alt="gx2"> </div> <div class="item"> <img src="gx3.jpg" alt="gx3"> </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ụ trên
- 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 một carousel với chỉ số id=”myCarousel”. Lớp .carousel để mô tả thẻ div này chứa một carousel. Lớp .slide để thêm các hiệu ứng 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 lớp slide. 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.Lớp .active để mô tả slide nào sẽ được hiển thị đầu tiên. Nội dung của slide có thể là ảnh hay văn bản hoặc video
- Phần “Left and right controls” là các nút cho phép người dùng lướt 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.
Thêm chú thích vào slide
Chúng ta hoàn toàn có thể thêm chú thích vào các slide trong carousel một cách đơn giản bằng 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.
<div class="container"> <h3>Carousel - Ví Dụ</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="gx1.jpg" alt="gx1"> <div class="carousel-caption"> <h3>ARIN</h3> <p>Thành viên nhóm nhạc nữ Hàn Quốc OH MY GIRL</p> </div> </div> <div class="item"> <img src="gx2.jpg" alt="gx2"> <div class="carousel-caption"> <h3>LUDA</h3> <p>Nữ ca sĩ Hàn Quốc LUDA xinh đẹp</p> </div> </div> <div class="item"> <img src="gx3.jpg" alt="gx3"> <div class="carousel-caption"> <h3>NARA</h3> <p>Thành viên nhóm nhạc nữ Hàn Quốc Hello Venus</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>
Kết quả :
Lời kết:
Đến đây, chắc hẳn bạn đã nắm cách tạo 1 carousel (slideshow) trong Bootstrap rồi phải không nào. 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 thế nhưng trong khuôn khổ bài viết này chúng mình không thể đề cập hết được, bạn có thể tự khám phá sau nhé. Chúc các bạn thành công!
