Tạo Các Slide Trong Bootstrap Với Carousel

Carousel giúp tạo ra các slide trình diễn, mỗi slide có thể hiện thị nội dung bất kỳ (thông thường là các hình ảnh và các dòng chữ chú thích cho hình ảnh đó).

Trước tiên cần tạo ra một phần tử chứa .carousel có gán cho nó một id ví dụ mycarousel và có thuộc tính data-ride="carousel". Mặc định khi lật slide nó sẽ xuất hiện ngay lập tức, nếu muốn nó trượt thì thêm vào .slide, nếu muốn thêm hiệu ứng mờ dần thêm vào .carousel-fade

Ví dụ

<div id="mycarousel" class="carousel slide" data-ride="carousel"> <!--Cho hiện thị chỉ số nếu muốn--> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1" class=""></li> <li data-target="#mycarousel" data-slide-to="2" class=""></li> </ol> <!--Hết tạo chỉ số--> <!--Các slide bên trong carousel-inner--> <div class="carousel-inner"> <!--Slide 1 thiết lập hiện thị đầu tiên .active--> <div class="carousel-item active"> <img class="d-block w-100" src="http://leanature.com/wp-content/uploads/2015/09/Slide_g%C3%A9n%C3%A9rique_Groupe.jpg"> <!--Cho thêm hiện thị thông tin--> <div class="carousel-caption d-none d-md-block"> <h5>Tiêu đề Slide 1</h5> <p>Dòng text chú thích cho Slide 1</p> </div> </div> <!--Slide 2--> <div class="carousel-item"> <img class="d-block w-100" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/53a4bc56-d08f-4ee1-b542-a26a20945688/nature-wallpaper14.jpg"> </div> <!--Slide 3--> <div class="carousel-item"> <img class="d-block w-100" src="http://files.all-free-download.com//downloadfiles/wallpapers/1280_720/beautiful_waterfall_wallpaper_rivers_nature_1142.jpg"> </div> </div> <!--Cho thêm khiển chuyển slide trước, sau nếu muốn--> <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--Hết tạo điều khiển chuyển Slide--> </div>

Các slide xây dựng từ .carousel-item chúng nằm trong .carousel-inner. Nếu slide nào kích hoạt cho thêm .active. Bên trong Slide thường chứa một hình ảnh với thiết lập class="d-block w-100"

Một Slide có thể thêm phần chú thích bằng phần tử .carousel-caption

Tiêu đề Slide 1

Dòng text chú thích cho Slide 1

Previous Next ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới