Carousel hay còn gọi là slideshow.
Ví dụ sau đây cho thấy cách tạo một carousel cơ bản:
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Sau đây là bảng mô tả về những gì mỗi class từ ví dụ trên làm:
Class | Description |
---|---|
.carousel | Tạo carousel |
.carousel-indicators | Add các dot bên dưới carousel (Mỗi dot tượng trưng cho 1 slide, dot nào sáng là đang ở silde đó, số dot chính là số slide hiện có trong carousel) |
.carousel-inner | Add slides cho carousel |
.carousel-item | Chỉ định nội dung của từng slide |
.carousel-control-prev | Add mũi tên trái (previous button) cho carousel, cho phép người dùng quay trở lại giữa các slide |
.carousel-control-next | Adds mũi tên phải (next button) cho carousel, cho phép người dùng đi tiếp giữa các slide |
.carousel-control-prev-icon | Được sử dụng cùng với class .carousel-control-prev để tạo "previous" button |
.carousel-control-next-icon | Được sử dụng cùng với class .carousel-control-next để tạo "next" button |
.slide | Thêm hiệu ứng chuyển tiếp và hiệu ứng CSS khi trượt sang mục tiếp theo. Xóa class này nếu bạn không muốn hiệu ứng đó |
<div class="carousel-caption">
với từng <div class="carousel-item">
để tạo caption cho mỗi slide:<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website