Carousel chính là 1 plugin trong bootstrap nói riêng và jquery nói chung để có thể duyệt được các phần tử như hình ảnh, slide,… Vậy cách tạo carousel đơn giản như thế nào? Mời các bạn cùng tham khảo bài viết dưới đây của blog vietnamforestry nhé.
Cách tạo carousel đơn giản
Trước tiên, tôi sẽ tạo ra 1 đợn code html đơn giản dưới đây.
<div id=”main”>
<div class=”container”>
<h1>Carousel with bootstrap</h1>
<div id=”carousel-simple” class=”carousel slide col-md-6 col-md-offset-3″ data-ride=”carousel”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#carousel-simple” data-slide-to=”0″ class=”active”></li>
<li data-target=”#carousel-simple” data-slide-to=”1″></li>
<li data-target=”#carousel-simple” data-slide-to=”2″></li>
<li data-target=”#carousel-simple” data-slide-to=”3″></li>
</ol><!– Wrapper for slides –>
<div class=”carousel-inner” role=”listbox”>
<div class=”item active”>
<img src=”media/products/2.png” alt=””>
</div>
<div class=”item”>
<img src=”media/products/3.png” alt=””>
</div>
<div class=”item”>
<img src=”media/products/17.png” alt=””>
</div>
<div class=”item”>
<img src=”media/products/24.png” alt=””>
</div>
</div><!– Controls –>
<a class=”left carousel-control” href=”#carousel-simple” role=”button” data-slide=”prev”>
<i class=”fa fa-chevron-left” aria-hidden=”true”></i>
</a>
<a class=”right carousel-control” href=”#carousel-simple” role=”button” data-slide=”next”>
<i class=”fa fa-chevron-right” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
Sau đó chạy đoạn code ở trên, và nó sẽ đưa ra kết quả hiển thị giống như hình ảnh ở dưới đây:
Trong đó:
Phần tử div ở ngoài cùng:
- ** id=”carousel-simple”** : sử dụng để định nghĩa 1 carousel. Khi các button điều khiển (tiến tới hay lùi lại) hay indicators sẽ thông qua chính id này để giúp chúng ta có thể thao tác xem slide tiếp kế tiếp hay trước đó.
- class .carousel: sử dụng để mô tả thẻ div này có chứa 1 carousel. Khi đó bạn có thể sử dụng class này trong script để có thể thay đổi các lựa chọn cho carousel.
- data-ride=”carousel”: sử dụng để kích hoạt hiệu ứng hoạt hình sẽ lập tức được hoạt động khi mà trang được F5 lại.
Phần “indicators”: đây là những chấm tròn màu xanh ở dưới slide giống như ví dụ ở trên, bạn có thể kéo lên kết quả để check lại.
- Data-target: sử dụng để chỉ đến id của carousel, và thông qua id của carousel chúng ta có thể thao tác lên các phần tử slide.
- Data-slide-to: sử dụng để truyền chỉ số của 1 slide, có tác dụng chuyển vị trí slide tới 1 vị trí có thể số cụ thể, và nó được tính từ 0.
Phần “wrapper for slides”: sử dụng để định nghĩa bên trong thẻ div với class là: .carousel-inner, (tất cả các nội dung trong mỗi slide sẽ được định nghĩa trong class .item, và nội dung ở đây có nghĩa là hình ảnh hay văn bản. Class .active dùng để mô tả slide nào đang được hiển thị.
Phần “Left and right controls”: sử dụng nhằm cho phép người dùng có thể xem hình ảnh trước khi thao tác lên đó như tiến tới hay lùi lại.
>> Xem thêm: Học bootstrap cơ bản với các định nghĩa
Hướng dân thêm caption cho carousel
Nếu như bạn muốn thêm caption vào các slide có trong 1 carousel thì bạn chỉ cần thêm div class=”carousel-caption” bên trong mỗi phần tử div class=”item” để có thể tạo ra các chú thích.
<div class=”item”>
<img src=”media/products/3.png” alt=””>
<div class=”carousel-caption”>
<h3>There are 3 red tomatoes</h3>
<p>They are so fresh</p>
</div>
</div>
kết quả
Hi vọng với những chia sẻ ở trên về 1 plugin vô cùng tuyệt vời ở trong bootstrap đó chính là carousel. Nếu như bạn còn thắc mắc về carousel thì có thể để lại thông tin ở bài viết dưới đây, đội ngũ admin của blog vietnamforestry sẽ giúp bạn trả lời thắc mắc trong thời gian sớm nhất. Chúc các bạn thành công.
