Carousel trong bootstrap 4

• 13-09-2020 16:24:58
• by: baobinhnet

Trong bootstrap 4, carousel sẽ giúp chúng ta không cần sử dụng jquery hoặc javascript vẫn có thể xây dựng được các slide show ảnh tuyệt đẹp và mượt mà, trong bài học hôm nay, chúng ta hãy cùng nhau nghiên cứu để sử dụng Crousel của bootstrap 4 nhé.

Carousel của Bootstrap 4 sẽ được sử dụng để xây dựng slideshow cho phép quay vòng một cụm các nội dung nào đó (có thể là ảnh hoặc text,...). Tất nhiên thông thường chúng ta sử dụng để làm slide ảnh.

Các vấn đề của Carousel

Carousel sẽ không tự định dạng kích thước cho bạn, vì thế bạn sẽ cần có code riêng hoặc thư viện riêng để điều chỉnh kích thước các slideshow nội dung hoặc ảnh của mình. Carousel cũng hỗ trợ cả controls và indicators (phần điều khiển và định vị slide, bạn sẽ hiểu hơn khi xuống các ví dụ code ở bên dưới) nhưng không được set mặc định, nếu bạn muốn dùng sẽ phải tự thêm vào. 

Chú ý: Nếu bạn có nhiều slide carousel trên một page, bạn cần phải đặt id duy nhất cho mỗi slide carousel nếu bạn muốn dùng các controls và indicator tùy chỉnh để tránh bị xung đột giữa các slideshow.

Carousel tự chạy không có điều khiển

Bây giờ chúng ta hãy cùng nhau xây dựng một đoạn slideshow tự chạy không có controls nhé:



Các bạn sẽ cần phải chờ một chút tầm 2-3 giây để có thể thấy slide show chuyển động.

Bộ điều khiển (controls)

Ở phía trên, chúng ta đã xây dựng xong 1 slidshow ảnh sử dụng carousel. Tuy nhiên khi không có controls, chúng ta không thể điều khiển được slider và khiến cho trải nghiệm của người dùng khác kém. Vậy giờ chúng ta hãy cùng nhau thêm controls vào nhé.



Chắc hẳn bạn đã thấy đoạn code mình thêm vào: 

Đầu tiên là đặt id cho carousel: id="carouselExampleControls"

Sau đó là mình thêm các điều khiển vào:
 

<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

Khá đơn giản đúng không bạn? So với dùng javascript thường hoặc jquery slider thì đơn giản hơn rất nhiều.
 

Carousel với indicators

Tương tự với controls, khi chúng ta muốn thêm indicators, chúng ta cần phải thêm id cho carousel: id="carouselExampleIndicators"

Tiếp theo chúng ta thêm indicators vào trong thẻ div của carousel:
 

<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>

Vậy là chúng ta đã hoàn thành một carousel có cả controls và indicators rồi.

Carousel với caption

Trong hầu hết các website chúng ta đều cần phải có caption (tiêu đề và mô tả) cho các slideshow. Tất nhiên carousel sẽ cung cấp đầy đủ cho các bạn. Chúng ta hãy cùng nhau xây dựng nhé:



Việc này khá đơn giản, bạn chỉ cần thêm đoạn code sau vào trong các thẻ div có class <div class="carousel-item active">

<div class="carousel-caption d-none d-md-block">
        <h5>FullStack Academy</h5>
        <p>Học qua dự án thực tế cùng giảng viên doanh nghiệp</p>
</div>

Kết luận

Ok vậy là chúng ta đã biết cách xây dựng một slideshow với carousel của bootstrap 4 rồi. Rất hữu ích đúng không? Hẹn gặp lại các bạn trong các bài học sau.

---

• Posted by baobinhnet
• 2020-09-13 15:05:01