[MUSIC]
Nhiều thành phần dựa trên JavaScript của Bootstrap cung cấp cho chúng ta một cơ chế
để kiểm soát một số tính năng của các thành phần này bằng cách viết mã JavaScript,
đặc biệt, bằng cách viết mã Sử dụng cú pháp jQuery.
Vì vậy, chúng tôi sẽ khám phá bài tập chỉ mục này bằng cách sử dụng một số
điều khiển dựa trên JavaScript cho Carousel của chúng tôi mà chúng tôi
đưa vào trang index.html trong bài tập trước đó.
Trong bài tập trước, chúng tôi đã giới thiệu Carousel này vào trang index.html của chúng tôi.
Những gì tôi muốn làm trong bài tập này là để giới thiệu một vài
nút điều khiển vào Carousel này, và
sau đó sử dụng JavaScript để có thể kích hoạt các nút này.
Các nút sẽ được sử dụng để tạm dừng và
phát hành động trượt của Carousel này.
Vì vậy, bao gồm các nút trong Carousel của chúng tôi ở đây,
chúng ta có thể nhấp vào một nút để ngăn chặn hành động trượt của Carousel, và
sau đó chúng ta có thể nhấp vào một nút khác để tiếp tục hành động trượt của Carousel.
Vì vậy, đó là những gì chúng ta có thể khám phá trong bài tập này.
Để bắt đầu bài tập này, chúng tôi sẽ đi đến trang index.html.
Và ngay sau khi điều khiển trái và phải của Carousel của chúng
tôi, tôi sẽ giới thiệu một div với nhóm nút lớp.
Vì vậy, điều này sẽ kèm theo một nhóm nút của hai nút ở đây, và sau đó với một ID của,
CarouselButton và
đóng div ở đó.
Bây giờ, bên trong này, tôi sẽ thêm vào hai nút.
Vì vậy, hãy để tôi thêm vào một nút với lớp btn, btn-danger,
btn-small, và
một id của băng chuyền tạm dừng.
Vì vậy, điều này sẽ hoạt động như nút tạm dừng, làm chậm nút ở đó.
Và đối với nút này, Tôi sẽ giới thiệu
một phông chữ như một biểu tượng với fa lớp,
tạm dừng, và đóng cửa khoảng.
Vì vậy, điều này sẽ giới thiệu một nút tạm dừng vào nhóm các nút Carousel.
Tôi sẽ sao chép này và dán nó một lần nữa để tạo một nút khác.
Nút thứ hai đó, tôi sẽ gọi btn btn-danger btn-sm, và
sau đó đây sẽ là carousel-play.
Và lớp span,
nút sẽ là nếu nó chơi ở đây.
Giả sử những thay đổi và đi và xem nhanh nó trên trang web.
Hãy nhìn vào các nút khi chúng tồn tại trong trình duyệt của chúng tôi, bạn có thể thấy rằng
hai nút này bây giờ được đặt ở góc trái của Carousel của tôi.
Tôi muốn đặt lại vị trí các nút này ở cạnh bên phải, để
nó không gây ra không gian màu xanh, trống bên dưới hình ảnh ở đây.
Vì vậy, hãy để tôi sử dụng một vài thuộc tính CSS để định vị lại các nút này
vào cột bên phải của Carousel.
Đi đến đó phong cách bắt đầu tập tin CSS,
hãy để tôi giới thiệu một số mã CSS ở đây.
Vì vậy, đối với các yếu tố với ID CarouselButtons,
tôi đang định vị nó vào cạnh bên phải và dưới cùng, 0 pixel ở đây.
Vì vậy, hai và sau đó vị trí là tuyệt đối.
Vì vậy, điều này sẽ định vị các nút này ở góc phải của Carousel của tôi.
Rõ ràng, chỉ cần giới thiệu các nút vào Carousel sẽ không phục vụ
bất kỳ mục đích nào.
Bây giờ, chúng ta sẽ tận dụng lợi thế của các điều khiển JavaScript mà
Carousel cung cấp bằng cách viết một chút mã jQuery ở
dưới cùng của trang index.html để làm cho các nút này làm công việc của họ.
Chúng tôi muốn có thể tạm dừng và tiếp tục hành động trượt của Carousel của tôi.
Đi đến cuối trang index.html, hãy để tôi giới thiệu một số kịch bản ở đây.
Vì vậy, kịch bản này nên chứa một số
mã JavaScript được viết bằng cú pháp jQuery.
Vì vậy, tôi sẽ nói,
$ (tài liệu) .ready (chức năng), Và
chức năng này nên chứa một vài
chức năng ở đây để kích hoạt các nút.
Vì vậy, tôi sẽ nói, mycarousel.
Đây là ID của băng chuyền mà chúng tôi được giới thiệu,
vì vậy chúng tôi sẽ nói, băng chuyền,
Khoảng thời gian: 2000.
Vì vậy, điều này làm là nó thiết lập khoảng trượt của Carousel
để 2000 mili giây hoặc 2 giây.
Vì vậy, tôi làm cho nó nhanh hơn một chút cho
hành động trượt để diễn ra trong Carousel.
Tiếp tục với mã jQuery ở đây.
Bây giờ tôi sẽ kích hoạt nút tạm dừng đó, vì vậy tôi sẽ nói băng chuyền tạm dừng.
Vì vậy, đó là id tôi đã đưa cho nút tạm dừng ở đó.
Vì vậy, đó là lý do để đưa ra id
Vì vậy, tôi muốn kích hoạt nút tạm dừng.
Vì vậy, tôi nói khi người dùng nhấp chuột.
Vì vậy, bạn có thể xem làm thế nào để đọc cú pháp.
Vì vậy, điều này nói, cho nút băng chuyền tạm dừng,
nếu một hành động nhấp chuột được thực hiện bởi người dùng, sau đó thực hiện
chức năng đặc biệt này mà tôi chỉ định bên trong mã này ở đây.
Chức năng mà tôi muốn làm là gì?
Tôi muốn có thể,
tạm dừng Carousel.
Vì vậy, chúng tôi sẽ nói, carousel ('tạm bời').
Vì vậy, bây giờ bạn thấy làm thế nào bạn đã sử dụng các điều khiển dựa trên jQuery.
Các điều khiển JavaScript được đưa ra cho thành phần Bootstrap Carousel và
viết một số mã để có thể kiểm soát Carousel.
Tương tự như vậy, tôi muốn có thể kích hoạt nút phát.
Vì vậy, khi nút phát được nhấp,
tôi muốn hành động trượt của Carousel để tiếp tục.
Vì vậy, tôi sẽ chỉ đơn giản là sao chép mã này, dán nó ở đó.
Và sau đó tôi sẽ nói carousel-play,
nhấp vào chức năng carousel của tôi và sau đó chức năng nói carousel ('chu kỳ').
Đó là cách bạn chỉ định rằng Carousel
nên tiếp tục trượt như trước.
Vì vậy, một trong những chức năng này chúng tôi đang gắn vào nút chơi ở đây.
Vì vậy, với hai,
chức năng của chúng tôi được giới thiệu bên trong chức năng sẵn sàng tài liệu này.
Tất cả các bạn đã thiết lập cho Carousel để được kích hoạt,
và hai nút để có thể kiểm soát hành vi của Carousel của chúng tôi.
Vì vậy, chúng ta hãy hiển thị những thay đổi, và đi và có một cái nhìn vào hành vi của Carousel của chúng tôi.
Đi đến trang của chúng tôi, bây giờ bạn thấy rằng Carousel của bạn đang di chuyển rất nhanh,
bởi vì tôi đặt khoảng thời gian là 2.000 mili giây hoặc 2 giây.
Vì vậy, mỗi hai giây, bạn sẽ thấy hành động trượt của Carousel.
Điều này chắc chắn là khó chịu.
Vì vậy, hãy để tôi tạm dừng điều đó bằng cách nhấp vào nút tạm dừng.
Vì vậy, khi bạn nhấp vào nút tạm dừng, hành động trượt của Carousel của bạn sẽ bị tạm dừng.
Bởi vì khi bạn nhấp vào nút tạm dừng, sau đó chức năng mà chúng tôi
giới thiệu trong mã JavaScript đi vào hoạt động và
sau đó tạm dừng chuyển động của Carousel.
Bây giờ, nếu bạn muốn tiếp tục, nhấp vào nút phát và
sau đó Carousel sẽ tiếp tục chuyển động của nó.
Vì vậy, như bạn có thể thấy, thời điểm bạn nhấp vào một nút phát, băng chuyền bắt đầu di chuyển.
Bây giờ, tất nhiên, bạn có thể cải thiện nhiều hơn về cách bạn tạo các nút này và như vậy,
nhưng đây là một cách đơn giản mà chúng tôi có thể giới thiệu để kiểm soát Carousel của chúng tôi.
Bài tập này minh họa cho bạn cách chúng tôi có thể sử dụng mã JavaScript
để có thể kiểm soát các thành phần dựa trên JavaScript Bootstrap của chúng tôi.
Đây là thời điểm tốt để làm một nhận xét về
mã của bạn với thông điệp Bootstrap jQuery.
[ NHẠC]