Chúng tôi vừa tìm hiểu về thành phần băng chuyền trong bài giảng trước đó.
Trong bài tập này, chúng ta sẽ thêm vào một băng chuyền vào
trang index.html của chúng tôi và trong quá trình tìm hiểu cách hoạt động của các thành phần băng chuyền.
Đi đến trang index.html,
chúng ta sẽ thêm vào một hàng mới vào div nội dung,
như hàng đầu tiên trong div.
Vì vậy, tôi sẽ đi vào và nói,
cho div lớp hàng nội dung và bên trong div này,
chúng ta sẽ tạo ra các thành phần băng chuyền.
Và trong div là gì tôi sẽ thêm vào div cột bên trong,
mà sẽ chứa các thành phần carousel ở đây.
Để thêm vào băng chuyền,
ở đây tôi sẽ thêm vào div với ID băng chuyền của tôi và
một băng chuyền lớp và
trượt và lớp đi xe dữ liệu.
Vì vậy, bạn có thể thấy các thành phần JavaScript đi vào hành động ở đây,
và sau đó đóng div và bắt đầu xây dựng ra băng chuyền bên trong div này ở đây.
Vì vậy, vào băng chuyền này,
chúng ta sẽ thêm vào nội dung của băng chuyền tiếp theo.
Vì vậy, tôi sẽ đi vào và sau đó thêm một div với
băng chuyền lớp bên trong và vai trò như hộp danh sách.
Đây là cách chúng tôi xây dựng băng chuyền và sau đó đóng div đó ở đó.
Và bên trong div này một lần nữa chúng tôi sẽ giới thiệu divs rằng sẽ lưu trữ
các mục của băng chuyền bằng cách áp dụng các lớp mục băng chuyền.
Và cái đầu tiên trong mục băng chuyền...
Người đầu tiên trong lớp băng chuyền,
tôi sẽ áp dụng lớp hoạt động.
Vì vậy, đây là div đầu tiên mà bắt đầu
có chứa slide bắt đầu ở đó và những người còn lại, tôi sẽ thêm vào.
Hãy để tôi thêm vào hai divs băng chuyền mục
ở đây và chỉ áp dụng một trong những đầu tiên với lớp hoạt động.
Bây giờ tôi sẽ giới thiệu trong nội dung vào các mục băng chuyền này.
Vì vậy, để xây dựng một mục băng chuyền,
tôi sẽ đi vào đó và sau đó bao gồm một hình ảnh với lớp d-block.
Vì vậy, điều này được sử dụng cho,
đây là một lớp flex cho phép hình ảnh của chúng tôi được định vị đúng và sau đó thêm
vào lớp chất lỏng hình ảnh và sau đó là nguồn như img.
Vì vậy, những gì tôi sẽ làm là di chuyển trong nội dung đó từ
ba hàng nội dung bên dưới và sau đó thêm nó vào băng chuyền ở đây.
Vì vậy, tôi thêm vào một hình ảnh ở đây và sau đó đến băng chuyền,
Tôi cũng có thể thêm vào
một div với
chú thích băng chuyền lớp.
Ở đây chúng ta có thể bao gồm một số văn bản sẽ được chuyển tiếp như là một chú thích vào hình ảnh.
Vì vậy, tôi sẽ nói chú thích băng chuyền d-none, d-md-block.
Và sau đó bên trong đây,
tôi sẽ bao gồm các nội dung từ các hàng nội dung ở đây.
Vì vậy, tôi sẽ đi vào và sao chép nội dung từ các hàng nội dung
ở đây và sau đó dán vào khối chú thích băng chuyền ở đây.
Và tôi sẽ loại bỏ các lớp mà chúng tôi áp dụng cho H2 từ nội dung này.
Bây giờ, chúng ta sẽ lặp lại điều tương tự cho hai phần còn lại bằng cách sao chép
nội dung từ các hàng nội dung bên dưới ở đây.
Vậy, hãy để tôi hoàn thành điều đó và sau đó chúng ta sẽ quay lại và
xem băng chuyền trông như thế nào.
Ở đây bạn có thể thấy rằng tôi đã hoàn thành
các mục băng chuyền còn lại ở đây bằng cách sao chép nội dung từ các hàng nội dung dưới đây.
Hãy thêm vào một vài lớp CSS để băng chuyền được cấu trúc độc đáo.
Vì vậy, đi đến tập tin styles.css ở dưới cùng ở đây,
tôi sẽ thêm vào một vài lớp học nữa ở đây.
Đối với lớp băng chuyền,
tôi sẽ thêm nền như 512DA8,
mà chúng tôi đã sử dụng trước lớp màu tối.
Và sau đó đối với lớp băng chuyền,
tôi sẽ thêm vào một chiều cao là 300 pixel.
Và đối với hình ảnh được bao gồm bên trong mục băng chuyền,
tôi sẽ áp dụng một vài biến đổi ở đây.
Tôi có thể nói, vị trí tuyệt đối.
Tôi muốn đặt nó sang bên trái.
Vì vậy, trên cùng và trái zero này sẽ định vị hình ảnh này vào cạnh trên cùng bên trái
của hộp băng chuyền ở đó và với
chiều cao tối thiểu được đặt thành 300 pixel để phù hợp với chiều cao băng chuyền mục.
Vì vậy, hình ảnh này về cơ bản sẽ kéo dài toàn bộ chiều cao của
băng chuyền nhưng sẽ được định vị ở cạnh trái của hộp băng chuyền ở đây.
Vì vậy, hãy để tôi lưu lại những thay đổi.
Chúng tôi sẽ chỉ đi và có một cái nhìn vào băng chuyền này trông như thế nào trên trang web của chúng tôi.
Đi đến trang web,
bây giờ bạn có thể thấy băng chuyền đó đang hoạt động trên trang bảng nghiên cứu chỉ mục của chúng tôi.
Vì vậy, bạn có thể thấy rằng băng chuyền được
đặt ở trên cùng ở đây và sau đó chúng tôi sẽ tiếp tục cuộn theo khoảng thời gian đều đặn.
Lưu ý làm thế nào bằng cách sử dụng các lớp CSS,
tôi đã tạo kiểu nền từ băng chuyền sao cho các chú thích có
thể nhìn thấy rõ ràng trong băng chuyền
và cũng như cách hình ảnh đã được định vị trên băng chuyền.
Chiều cao của slide băng chuyền này được cố định ở 300 pixel.
Vì vậy, điều này cho một bố cục sạch sẽ tốt đẹp cho băng chuyền này.
Bây giờ, chúng ta hãy thêm vào một vài điều khiển cho băng chuyền này.
Quay trở lại index.html.
Ngay sau khi băng chuyền trong hộp của chúng tôi ở đây nhưng vẫn còn bên trong băng chuyền,
tôi sẽ thêm vào một OL để giới thiệu một vài điều khiển thủ công cho băng chuyền.
Và với các chỉ số băng chuyền lớp.
Các chỉ báo này sẽ được đặt trên
các trang chiếu băng chuyền để cho biết trang chiếu cụ thể nào hiện đang được hiển thị.
Vì vậy, hãy để tôi giới thiệu trong nội dung ở đây vì vậy tôi nói OL,
Tôi sử dụng OL cho điều này.
Và sau đó, bên trong đó tôi sử dụng danh sách với
mục tiêu dữ liệu thiết lập để băng chuyền của tôi.
Vì vậy, đây là ID của băng chuyền và dữ liệu slide-to.
Và các chỉ số đầu tiên sẽ trượt xuống trượt số 0.
Với lớp đó là hoạt động cho mục đầu tiên trong danh sách này,
sau đó hai mục còn lại tôi sẽ chỉ đơn giản là sử dụng danh sách với các mục tiêu dữ liệu
thiết lập bằng băng chuyền của tôi
và trượt dữ liệu được thiết lập để một.
Vì vậy, đây là cho slide thứ hai ở đó.
Tôi sẽ chỉ sao chép cái này và sau đó tạo ra chỉ báo thứ ba ở đây.
Vì vậy, chúng tôi sẽ đi vào và sao chép điều này và sau đó thay đổi dữ liệu trượt sang hai.
Vì vậy, chúng tôi có các slide miễn phí trong băng chuyền của chúng tôi vì vậy ba chỉ số là đủ.
Bây giờ, chúng tôi cũng sẽ thêm vào một vài điều khiển để
băng chuyền này cho phép chúng tôi tự cuộn băng chuyền.
Để làm điều đó, tôi sẽ giới thiệu một A với
lớp băng chuyền điều khiển -prev ở đây.
Vì vậy, điều này sẽ cho phép tôi đi đến slide trước đó,
làm cho href bằng mycarousel,
vì vậy bạn có thể thấy rằng chúng tôi đang cố gắng để nhắm mục tiêu băng chuyền đó và vai trò là một nút.
Vì vậy, điều này sẽ hoạt động như một nút và slide dữ liệu như trước.
Vì vậy, trong A này,
tôi sẽ giới thiệu một biểu tượng
để đại diện điều khiển này trên màn hình.
Vì vậy, tôi sẽ nói, span lớp băng chuyền kiểm soát -pre-biểu tượng
và đóng khoảng ở đây.
Bây giờ tôi sẽ sao chép điều khiển này.
Và dán nó ở đây và sau đó tạo điều khiển cho slide tiếp theo ở đây vì vậy tôi sẽ nói,
carousel-control-next và roll là một nút và slide dữ liệu được sử dụng để
tiếp theo và biểu tượng sẽ là carousel-control-next biểu tượng.
Vì vậy, thêm những cái này vào băng chuyền của tôi, chúng
ta hãy đi và nhìn vào băng chuyền của chúng tôi tại thời điểm này.
Đi đến băng chuyền,
bây giờ bạn có thể thấy rằng trong băng chuyền của tôi, tôi có ba nút chỉ báo ở đây,
cho biết trang trình bày cụ thể nào
hiện đang được hiển thị trong băng chuyền của tôi và như các trang trình bày,
sau đó chỉ báo cũng tương ứng thay đổi để
chỉ ra trang trình bày cụ thể là có thể nhìn thấy được.
Tôi có thể tự bấm vào một trong số họ và đi đến trang trình bày cụ thể trong băng chuyền.
Không chỉ vậy, bạn có thể thấy rằng bây giờ có hai chỉ số,
bên trái và bên phải,
mà tôi có thể sử dụng để cuộn lại qua băng chuyền bằng cách
nhấp vào các chỉ số này ở đây.
Vì vậy, bằng cách sử dụng
các điều khiển này, cả điều khiển trước và tiếp theo và các chỉ số ở đây,
tôi có thể điều hướng đến slide cụ thể trong băng chuyền của tôi.
Điều này hoàn thành bài tập này.
Đây là thời điểm tốt để bạn thực hiện một git-commit với băng chuyền tin nhắn.