Bước 1: Chép đoạn code bên dưới đặt vào vị trí slide bạn muốn đặt trong thẻ <body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">Bước 2: Thay đổi đường dẫn hình ảnh, thông tin... ( phần được bôi đỏ trong đoạn code)
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="">
<div class="carousel-caption">
<h3>Tiêu đề ảnh 1</h3>
<p>Description ảnh 1</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="">
<div class="carousel-caption">
<h3>Tiêu đề ảnh 2</h3>
<p>Description ảnh 2</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="">
<div class="carousel-caption">
<h3>Tiêu đề ảnh 3</h3>
<p>Description ảnh 3</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="">
<div class="carousel-caption">
<h3>Tiêu đề ảnh 4</h3>
<p>Description ảnh 4</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">Previous</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">Next</span>
</a>
</div>
Chú ý: tại vị trí <!-- Indicators --> mỗi dòng <li> tương ứng 1 với 1 ảnh, nếu bạn thêm ảnh thứ năm hay tạo thêm một dòng <li> mới với data-slide-to="4".
Tương tự, bạn phải thêm một ảnh mới dưới phần <!-- Wrapper for slides -->
Chúc các bạn thành công!
Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
0 nhận xét:
Post a Comment