Băng chuyền là một trình chiếu để xoay vòng qua một loạt nội dung, được tạo bằng các biến đổi CSS 3D và một chút JavaScript. Nó hoạt động với một loạt hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Nó cũng bao gồm hỗ trợ cho các điều khiển và chỉ báo trước đó/tiếp theo
Trong các trình duyệt hỗ trợ API Hiển thị Trang, băng chuyền sẽ tránh trượt khi người dùng không nhìn thấy trang web [chẳng hạn như khi tab trình duyệt không hoạt động, cửa sổ trình duyệt được thu nhỏ, v.v. ]
Xin lưu ý rằng các băng chuyền lồng nhau không được hỗ trợ và các băng chuyền thường không tuân thủ các tiêu chuẩn trợ năng
Cuối cùng, nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó
Thí dụ
Băng chuyền không tự động chuẩn hóa kích thước trang trình bày. Do đó, bạn có thể cần sử dụng các tiện ích bổ sung hoặc kiểu tùy chỉnh để định cỡ nội dung phù hợp. Mặc dù băng chuyền hỗ trợ các điều khiển và chỉ báo trước đó/tiếp theo, nhưng chúng không bắt buộc phải có. Thêm và tùy chỉnh khi bạn thấy phù hợp
Lớp
Previous
Next
0 cần được thêm vào một trong các trang chiếu nếu không băng chuyền sẽ không hiển thị. Ngoài ra, hãy đảm bảo đặt một id duy nhất trên
Previous
Next
1 cho các điều khiển tùy chọn, đặc biệt nếu bạn đang sử dụng nhiều băng chuyền trên một trang. Các phần tử kiểm soát và chỉ báo phải có thuộc tính
Previous
Next
2 [hoặc
Previous
Next
3 đối với các liên kết] khớp với id của phần tử
Previous
Next
1Chỉ trang trình bày
Đây là băng chuyền chỉ có các trang trình bày. Lưu ý sự hiện diện của
Previous
Next
5 và
Previous
Next
6 trên hình ảnh băng chuyền để ngăn việc căn chỉnh hình ảnh mặc định của trình duyệt
Với điều khiển
Thêm vào các điều khiển trước đó và tiếp theo
Previous
Next
Bạn cũng có thể thêm các chỉ báo vào băng chuyền, cùng với các điều khiển
Previous
Next
Với chú thích
Thêm chú thích vào trang chiếu của bạn một cách dễ dàng với phần tử
Previous
Next
7 trong bất kỳ
Previous
Next
8 nào. Chúng có thể được ẩn dễ dàng trên các khung nhìn nhỏ hơn, như hình bên dưới, với các tiện ích hiển thị tùy chọn. Chúng tôi ẩn chúng ban đầu với
Previous
Next
9 và đưa chúng trở lại trên các thiết bị cỡ trung bình với
Previous
Next
0trang trình bày đầu tiên
Nhãn trượt đầu tiên
Nulla vitae elit libero, pharetra augue mollis interdum
trang trình bày thứ hai
Nhãn trượt thứ hai
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Trang trình bày thứ ba
Nhãn trượt thứ ba
Praesent commodo cursus magna, vel scelerisque nisl consectetur
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
chéo
Thêm
Previous
Next
1 vào băng chuyền của bạn để tạo hiệu ứng động cho các trang chiếu bằng hiệu ứng chuyển tiếp mờ dần thay vì trang chiếu
Previous
Next
Khoảng thời gian
Previous
Next
8 cá nhân
Previous
Next
Thêm
Previous
Next
3 vào
Previous
Next
8 để thay đổi khoảng thời gian trì hoãn giữa các lần tự động chuyển sang mục tiếp theo
Previous
Next
Cách sử dụng
Thông qua thuộc tính dữ liệu
Sử dụng các thuộc tính dữ liệu để dễ dàng kiểm soát vị trí của băng chuyền.
Previous
Next
5 chấp nhận các từ khóa
Previous
Next
6 hoặc
Previous
Next
7, làm thay đổi vị trí trang chiếu so với vị trí hiện tại của nó. Ngoài ra, sử dụng
Previous
Next
8 để chuyển chỉ mục trang trình bày thô tới băng chuyền
Previous
Next
9, chuyển vị trí trang trình bày sang một chỉ mục cụ thể bắt đầu bằng
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
0Thuộc tính
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
1 được sử dụng để đánh dấu băng chuyền là hoạt ảnh bắt đầu từ khi tải trang. Nếu bạn không sử dụng
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
1 để khởi tạo băng chuyền của mình, thì bạn phải tự khởi tạo nó. Nó không thể được sử dụng kết hợp với khởi tạo JavaScript rõ ràng [dư thừa và không cần thiết] của cùng một băng chuyềnQua JavaScript
Gọi băng chuyền theo cách thủ công với
$['.carousel'].carousel[]
Tùy chọn
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
3, như trong
Previous
Next
3NameTypeDefaultDescriptionintervalnumber5000Lượng thời gian để trì hoãn giữa việc tự động quay vòng một mục. Nếu sai, băng chuyền sẽ không tự động quay vòng. keyboardbooleantrue Liệu băng chuyền có phản ứng với các sự kiện bàn phím hay không. chuỗi tạm dừng. boolean"di chuột"Nếu được đặt thành
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
5, tạm dừng chu kỳ của băng chuyền vào ngày
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
6 và tiếp tục chu kỳ của băng chuyền vào ngày
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
7. Nếu được đặt thành
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
8, việc di chuột qua băng chuyền sẽ không tạm dừng băng chuyềnTrên các thiết bị hỗ trợ cảm ứng, khi được đặt thành
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous
Next
5, quá trình đạp xe sẽ tạm dừng vào ngày
Previous
Next
0 [sau khi người dùng tương tác xong với băng chuyền] trong hai khoảng thời gian, trước khi tự động tiếp tục. Lưu ý rằng đây là ngoài hành vi chuột ở trênridestringfalseTự động phát băng chuyền sau khi người dùng xoay vòng mục đầu tiên theo cách thủ công. Nếu là "băng chuyền", tự động phát băng chuyền khi tải. wrapbooleantrueLiệu băng chuyền có quay vòng liên tục hay có các điểm dừng cứng không. touchbooleantrueCho dù băng chuyền có hỗ trợ tương tác vuốt sang trái/phải trên thiết bị màn hình cảm ứng hay khôngphương pháp
Các phương thức và chuyển tiếp không đồng bộ
Tất cả các phương thức API đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin
Previous
Next
1
Previous
Next
Khởi tạo băng chuyền với một tùy chọn tùy chọn
Previous
Next
2 và bắt đầu quay vòng qua các mục$['.carousel'].carousel[{
interval: 2000
}]
Previous
Next
3
Previous
Next
Xoay vòng qua các mục băng chuyền từ trái sang phải
Previous
Next
4
Previous
Next
Dừng băng chuyền quay vòng qua các mục
Previous
Next
5
Previous
Next
Xoay vòng băng chuyền đến một khung cụ thể [dựa trên 0, tương tự như một mảng]. Trả về người gọi trước khi mục đích được hiển thị [i. e. trước khi sự kiện
Previous
Next
6 xảy ra]
Previous
Next
7
Previous
Next
Chu kỳ đến mục trước đó. Trả về người gọi trước khi mục trước đó được hiển thị [i. e. trước khi sự kiện
Previous
Next
6 xảy ra]
Previous
Next
9
Previous
Next
Chu kỳ đến mục tiếp theo. Trả về người gọi trước khi mục tiếp theo được hiển thị [i. e. trước khi sự kiện
Previous
Next
6 xảy ra]
Previous
Next
1
Previous
Next
Phá hủy băng chuyền của một phần tử
Sự kiện
Lớp băng chuyền của Bootstrap hiển thị hai sự kiện để nối vào chức năng băng chuyền. Cả hai sự kiện đều có các thuộc tính bổ sung sau
2. Hướng mà băng chuyền đang trượt [_______20_______3 hoặc
4]
5. Phần tử DOM đang được trượt vào vị trí làm mục hoạt động
6. Chỉ số của mục hiện tại
7. Chỉ mục của mục tiếp theo
Tất cả các sự kiện băng chuyền được kích hoạt tại chính băng chuyền [i. e. tại
]. Loại sự kiệnMô tảslide. bs. băng chuyền Sự kiện này kích hoạt ngay lập tức khi phương thức đối tượng
Previous
Next
8 được gọi. trượt. bs. băng chuyền Sự kiện này được kích hoạt khi băng chuyền đã hoàn thành quá trình chuyển đổi trang chiếu của nó. $['#myCarousel'].on['slide.bs.carousel', function [] {
// do something...
}]
Thay đổi thời lượng chuyển tiếp
Thời lượng chuyển tiếp của
Previous
Next
8 có thể được thay đổi bằng biến $['.carousel'].carousel[]
0 Sass trước khi biên dịch hoặc kiểu tùy chỉnh nếu bạn đang sử dụng CSS đã biên dịch. Nếu áp dụng nhiều chuyển đổi, hãy đảm bảo rằng chuyển đổi chuyển đổi được xác định trước [ví dụ:. $['.carousel'].carousel[]
1]