IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Trang Chủ Học Bootstrap Bootstrap 4 Carousel

Bootstrap 4 Carousel

by GokiSoft.Com - 19:27 12/10/2020 3,748 Lượt Xem

Bootstrap 4 Carousel

Carousel hay còn gọi là slideshow.


Cách để tạo một Carousel

Ví dụ sau đây cho thấy cách tạo một carousel cơ bản:

Ví dụ

<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>

Giải thích ví dụ

Sau đây là bảng mô tả về những gì mỗi class từ ví dụ trên làm:

ClassDescription
.carouselTạo carousel
.carousel-indicatorsAdd 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-innerAdd slides cho carousel
.carousel-itemChỉ định nội dung của từng slide
.carousel-control-prevAdd 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-nextAdds 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
.slideThê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 đó


Add Captions cho các Slide

Add các phần tử bên trong <div class="carousel-caption"> với từng <div class="carousel-item"> để tạo caption cho mỗi slide:

Ví dụ

<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>

Bình luận



Đã sao chép!!!