Khi chúng ta nghĩ về một băng chuyền, điều thường nghĩ đến là chuyến đi trong công viên giải trí mà bạn có thể đã cưỡi khi còn nhỏ - một sân ga lớn quay với những con ngựa đu quay đầy màu sắc lên xuống khi quá trình chạy.
Bootstrap Carousel không phải là loại hình hội chợ vui nhộn mà chúng ta biết đến khi còn nhỏ, nhưng khái niệm này có những điểm tương đồng. Bài viết này đánh giá cách bắt đầu với Bootstrap, xem xét phần tử giao diện người dùng băng chuyền là gì, khi nào thì tốt để sử dụng nó và cách xây dựng phần tử này bằng khung Bootstrap.
Bắt đầu
Điều đầu tiên chúng ta cần làm để thiết lập Bootstrap Carousel là đảm bảo chúng ta có các phụ thuộc thích hợp. Đối với điều này, chúng ta cần Bootstrap, PopperJS và jQuery. Hãy xem trang Bắt đầu nhanh của Bootstrap để được hỗ trợ thêm các phần phụ thuộc vào dự án của bạn.
Đó là quyết định của bạn về cách xử lý yêu cầu phụ thuộc, nhưng cách dễ nhất, thân thiện hơn với người mới bắt đầu là sử dụng mạng phân phối nội dung - CDN - cho jQuery, Popper.js và Bootstrap. Hãy cẩn thận với thứ tự <script> của bạn thẻ - vấn đề đặt hàng ở đây.
Bây giờ bạn đã sẵn sàng để bắt đầu!
Sử dụng Tài liệu Bootstrap để tạo băng chuyền
Ở phía bên trái của Introduction/Getting Started , bạn sẽ thấy một thanh bên liên kết đến nhiều thứ khác nhau. Hãy xem các Components liên kết và nhấp vào nó. Điều này sẽ dẫn bạn đến phần đầu tiên trong số nhiều thành phần có sẵn của Bootstrap:Alerts . Nếu chúng ta nhìn lại thanh bên, nó hiện hiển thị các liên kết khác nhau đến tất cả các thành phần khác nhau có sẵn cho chúng ta.
Nhấp vào Carousel thành phần để bắt đầu. Điều này sẽ có thông tin chúng tôi cần.
Cách thức hoạt động
Bootstrap tận dụng thuộc tính chuyển đổi CSS và một số JavaScript để vận hành băng chuyền khi nó di chuyển từ trang trình bày này sang trang trình bày tiếp theo. Băng chuyền cơ bản nhất là một loạt hình ảnh hoặc đánh dấu di chuyển từ hình ảnh này sang hình ảnh khác sau một khoảng thời gian nhất định.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Cấu trúc cơ bản
Thanh điều hướng Bootstrap 
Dưới đây là một số thuộc tính đã thấy ở trên mà bạn có thể chưa quen với bạn và ý nghĩa của chúng:
| Thuộc tính | Ý nghĩa |
| data-ride =“carousel” | Hoạt ảnh khi tải trang. |
| data-period =“false | [num tính bằng mili giây] ” | Nếu được đặt thành false, băng chuyền không tự động xoay vòng. Nếu không, nó quay vòng dựa trên số tính bằng mili giây. |
| data-pause =“hover” | Khi người dùng di chuột qua băng chuyền, băng chuyền sẽ tạm dừng trên hình ảnh đang hoạt động hiện tại. Trên mouseleave, băng chuyền sẽ tiếp tục quá trình quay vòng. |
| class =“active” | Hoạt động là cần thiết để biết hình ảnh nào sẽ hiển thị. |
| class =“d-block” | display:block; |
| class =“w-100” | chiều rộng:100%; |
Với các điều khiển
Ngoài cấu trúc chu trình cơ bản này, Bootstrap cung cấp các điều khiển băng chuyền cho thành phần. Đây là nơi mà phần lớn JavaScript phát huy tác dụng. Bootstrap sử dụng các chức năng sử dụng JavaScript của họ để làm cho băng chuyền hoạt động khi người dùng nhấp vào các điều khiển.
Trong đoạn mã này bên dưới, bạn sẽ thấy mũi tên trước và mũi tên tiếp theo ở hai bên của hình ảnh. Ngoài việc hoạt động như trước đây (trên một bộ đếm thời gian), hình ảnh sẽ thay đổi nếu người dùng nhấp vào một trong các mũi tên.
Thanh điều hướng Bootstrap Điều quan trọng cần hiểu về cách hoạt động của các điều khiển là href cần phải khớp với id duy nhất của div tổng thể của băng chuyền.
Kiểm soát tiếp theo:
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">Vùng chứa băng chuyền ngoài cùng:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">Các khu vực được đánh dấu cần phải khớp để các liên kết hoạt động.
Với các chỉ báo
Ngoài việc sử dụng các điều khiển để vận hành vòng quay của băng chuyền, bạn có thể cho biết bạn đang xem hình ảnh nào bằng cách hiển thị có bao nhiêu phần tử khối trong băng chuyền của bạn. Chúng có thể được sử dụng song song với các điều khiển.
Thanh điều hướng Bootstrap Danh sách được sắp xếp trong đoạn mã trên là những gì hiển thị các chỉ số. Lớp .active khớp với lớp đang hoạt động trong
carousel-items.Kết luận
Thoạt đầu, điều này có vẻ như rất nhiều thông tin cần tìm hiểu. Điều chính cần nhớ là chỉ cần làm theo tài liệu. Không nhất thiết phải ghi nhớ cách thực hiện điều này khi tài liệu được viết rất tốt và chi tiết.
Chắc chắn bạn nên biết cách mọi thứ hoạt động trên Bootstrap’s end - hãy xem tệp CSS và JS được rút gọn đó nếu bạn có thời gian để xem chúng có các phần tử được tạo kiểu và viết mã trong Bootstrap như thế nào. Ngoài ra, hãy biết ít nhất tất cả các thuộc tính có ý nghĩa như thế nào trong mã ví dụ để bạn có thể điều chỉnh nó cho phù hợp với nhu cầu của mình và sử dụng nó trong dự án của mình.
Một điều cuối cùng:lưu ý rằng thành phần băng chuyền có thể không phải là thành phần tốt nhất để sử dụng về khả năng truy cập. Đảm bảo tiếp tục làm cho trang của bạn dễ truy cập nhất có thể và không sử dụng thông tin trong băng chuyền của bạn mà bạn cũng không thể tìm thấy ở nơi khác.
Chúc bạn may mắn khi tiếp tục hành trình sử dụng Bootstrap!
