Bài 27: Carousel – Làm Slide trong Boostrap 4

0
876

Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn về 1 chủ đề hết sức thú vị, mà có lẽ là rất nhiều bạn đang tìm kiếm, đó là cách thức làm Slide. Khi tìm hiểu cách code ra 1 Slide, các bạn sẽ gặp khó khăn bởi vì sẽ phải có kiến thức về Javascript cũng như jQuery, nhưng với Bootstrap 4, thì các bạn sẽ không cần phải biết về JS hay jQuery đâu, Bootstrap đã hỗ trợ chúng ta cách thức xây dựng Slide nhanh chóng và đẹp mắt, thích hợp với các giao diện website bây giờ, tuyệt vời hơn nữa là Slide cũng đã được Reponsive trên các thiết bị hết rồi đấy, Slide trong Bootstrap được gọi là Carousel. Bây giờ chúng ta sẽ cùng đi tìm hiểu nhé!

Carousel là gì?

Carousel là 1 plugin trong bootstrap nói riêng và jquery nói chung dùng để duyệt các phần tử (hình ảnh, slide, …) tuần tự xoay vòng, tương tự như 1 slideshow (trình chiếu).

Để xây dựng carousel, bạn có thể nhúng tập tin “carousel.js” độc lập hoặc nhúng “bootstrap.js” hay “bootstrap.min.js” có sẵn trong Bootstrap. Bây giờ, chúng ta cùng sẵn sàng đi tìm hiểu cách tạo carousel đơn giản với bootstrap nhé.

Cách tạo 1 slide carousel

Đầu tiên, chúng ta tạo 1 đoạn HTML như thế này:

Thử chạy đoạn HTML bên trên, chúng ta sẽ có kết quả hiển thị như thế này:

Bây giờ mình sẽ đi giải thích chi tiết các thành phần của carousel dựa trên đoạn HTML trên nhé:

  • Phần tử div ngoài cùng <div id=”demo” class=”carousel slide data-ride=”carousel”> có:
    • id="demo" dùng để định nghĩa 1 carousel. Các button điều khiển (next, prev) hay Indicators sẽ thông qua id này để giúp chúng ta có thể thao tác xem slide tiếp theo hoặc slide trước đó. Nếu không tin, bạn có thể xóa id này trong phần control hoặc Indicators là biết liền. Sẽ không thể thao tác lên các phần này để xem phần slide mới hoặc quay lại xem slide cũ ngay lập tức. Muốn xem slide tiếp theo phải đợi auto next còn xem ảnh cũ, cứ đợi nó chạy hết 1 vòng nhé.
    • class .carousel để mô tả thẻ div này chứa 1 carousel.
    • class .slide để thêm các hiệu ứng động và chuyển tiếp, làm cho 1 đối tượng sẽ có hiệu ứng trượt khi hiển thị mới, nếu bạn không muốn có hiệu ứng này thì bỏ qua không định nghĩa.
    • Thuộc tính data-ride=”carousel” nhằm kích hoạt hiệu ứng hoạt hình sẽ lập tức hoạt động khi trang được tải.
  • Phần “Indicators”: Là các thanh ngang ở dưới slide như ảnh demo bên trên. Phần này cho chúng ta biết số phần tử slide hiện có và slide nào đang được hiển thị trong carousel này. Phần này có 2 thuộc tính cơ bản:
    • Thuộc tính data-target để chỉ đến id của carousel. Như trên tôi đã giải thích. Thông qua id của carousel, chúng ta có thể thao tác lên các phần tử slide. Chẳng hạn bạn muốn xem slide tiếp hoặc slide trước đó, bạn cũng có thể click vào các thanh ngang này thay vì click vào các button control.
    • Thuộc tính data-slide-to dùng để truyền chỉ số của một slide. Nó có tác dụng chuyển vị trí slide tới một vị trí có chỉ số cụ thể tính từ 0.
  • Phần “Wrapper for slides” được định nghĩa bên trong thẻ div với class .carousel-inner. Nội dung của mỗi slide sẽ được định nghĩa trong class .carousel-item, nội dung này có thể là hình ảnh hoặc văn bản. Class .active để mô tả slide nào đang được hiển thị.
  • Phần “Left and right controls” là các nút cho phép người dùng xem hình ảnh trước sau khi nhấn chuột lên các nút này. Thuộc tính data-slide cho phép dùng từ khóa “prev” hay “next”, để định nghĩa vị trí tiếp theo của 1 slide dựa vào vị trí của slide hiện tại.

Thêm Caption cho Carousel

Để thêm caption vào các slide trong 1 carousel, đơn giản là thêm phần tử div class=”carousel-caption” bên trong mỗi phần tử div class=”carousel-item” để tạo chú thích cho mỗi slide. Bạn hãy chèn bất kỳ mã HTML nào vào trong caption đó và nó sẽ được định dạng và căn chỉnh một cách tự động.

Hiển thị như sau:

Kết luận

OK, như vậy là đã xong phần Carousel trong Bootstrap, nó sẽ giúp các bạn làm Slide 1 cách nhanh chóng và đơn giản nhưng vẫn rất đẹp mắt đó.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây