1
00:00:03,650 --> 00:00:09,125
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 đó.

2
00:00:09,125 --> 00:00:14,324
Trong bài tập này, chúng ta sẽ thêm vào một băng chuyền vào

3
00:00:14,324 --> 00:00:20,760
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.

4
00:00:20,760 --> 00:00:24,090
Đi đến trang index.html,

5
00:00:24,090 --> 00:00:29,640
chúng ta sẽ thêm vào một hàng mới vào div nội dung,

6
00:00:29,640 --> 00:00:31,730
như hàng đầu tiên trong div.

7
00:00:31,730 --> 00:00:33,595
Vì vậy, tôi sẽ đi vào và nói,

8
00:00:33,595 --> 00:00:43,535
cho div lớp hàng nội dung và bên trong div này,

9
00:00:43,535 --> 00:00:47,545
chúng ta sẽ tạo ra các thành phần băng chuyền.

10
00:00:47,545 --> 00:00:56,925
Và trong div là gì tôi sẽ thêm vào div cột bên trong,

11
00:00:56,925 --> 00:01:02,045
mà sẽ chứa các thành phần carousel ở đây.

12
00:01:02,045 --> 00:01:04,135
Để thêm vào băng chuyền,

13
00:01:04,135 --> 00:01:13,630
ở đây tôi sẽ thêm vào div với ID băng chuyền của tôi và

14
00:01:13,630 --> 00:01:17,440
một băng chuyền lớp và

15
00:01:17,440 --> 00:01:24,170
trượt và lớp đi xe dữ liệu.

16
00:01:24,170 --> 00:01:33,110
Vì vậy, bạn có thể thấy các thành phần JavaScript đi vào hành động ở đây,

17
00:01:33,110 --> 00:01:42,420
và sau đó đóng div và bắt đầu xây dựng ra băng chuyền bên trong div này ở đây.

18
00:01:42,420 --> 00:01:44,995
Vì vậy, vào băng chuyền này,

19
00:01:44,995 --> 00:01:49,580
chúng ta sẽ thêm vào nội dung của băng chuyền tiếp theo.

20
00:01:49,580 --> 00:01:54,700
Vì vậy, tôi sẽ đi vào và sau đó thêm một div với

21
00:01:56,740 --> 00:02:07,815
băng chuyền lớp bên trong và vai trò như hộp danh sách.

22
00:02:07,815 --> 00:02:15,380
Đây là cách chúng tôi xây dựng băng chuyền và sau đó đóng div đó ở đó.

23
00:02:15,380 --> 00:02:22,955
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ữ

24
00:02:22,955 --> 00:02:32,855
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.

25
00:02:32,855 --> 00:02:37,120
Và cái đầu tiên trong mục băng chuyền...

26
00:02:37,240 --> 00:02:41,080
Người đầu tiên trong lớp băng chuyền,

27
00:02:41,080 --> 00:02:42,595
tôi sẽ áp dụng lớp hoạt động.

28
00:02:42,595 --> 00:02:48,235
Vì vậy, đây là div đầu tiên mà bắt đầu

29
00:02:48,235 --> 00:02:56,650
có chứa slide bắt đầu ở đó và những người còn lại, tôi sẽ thêm vào.

30
00:02:56,650 --> 00:03:09,680
Hãy để tôi thêm vào hai divs băng chuyền mục

31
00:03:09,680 --> 00:03:16,630
ở đây và chỉ áp dụng một trong những đầu tiên với lớp hoạt động.

32
00:03:16,630 --> 00:03:21,445
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.

33
00:03:21,445 --> 00:03:25,165
Vì vậy, để xây dựng một mục băng chuyền,

34
00:03:25,165 --> 00:03:33,770
tôi sẽ đi vào đó và sau đó bao gồm một hình ảnh với lớp d-block.

35
00:03:33,770 --> 00:03:35,655
Vì vậy, điều này được sử dụng cho,

36
00:03:35,655 --> 00:03:43,930
đâ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

37
00:03:43,930 --> 00:03:53,240
vào lớp chất lỏng hình ảnh và sau đó là nguồn như img.

38
00:03:58,220 --> 00:04:03,595
Vì vậy, những gì tôi sẽ làm là di chuyển trong nội dung đó từ

39
00:04:03,595 --> 00:04:09,020
ba hàng nội dung bên dưới và sau đó thêm nó vào băng chuyền ở đây.

40
00:04:15,470 --> 00:04:21,710
Vì vậy, tôi thêm vào một hình ảnh ở đây và sau đó đến băng chuyền,

41
00:04:21,710 --> 00:04:23,340
Tôi cũng có thể thêm vào

42
00:04:23,340 --> 00:04:28,200
một div với

43
00:04:28,200 --> 00:04:34,030
chú thích băng chuyền lớp.

44
00:04:34,030 --> 00:04:38,780
Ở đâ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.

45
00:04:38,780 --> 00:04:48,450
Vì vậy, tôi sẽ nói chú thích băng chuyền d-none, d-md-block.

46
00:04:48,740 --> 00:04:52,555
Và sau đó bên trong đây,

47
00:04:52,555 --> 00:04:59,490
tôi sẽ bao gồm các nội dung từ các hàng nội dung ở đây.

48
00:04:59,490 --> 00:05:04,600
Vì vậy, tôi sẽ đi vào và sao chép nội dung từ các hàng nội dung

49
00:05:04,600 --> 00:05:14,330
ở đây và sau đó dán vào khối chú thích băng chuyền ở đây.

50
00:05:25,320 --> 00:05:32,315
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.

51
00:05:32,315 --> 00:05:35,850
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

52
00:05:35,850 --> 00:05:40,820
nội dung từ các hàng nội dung bên dưới ở đây.

53
00:05:40,820 --> 00:05:43,645
Vậy, hãy để tôi hoàn thành điều đó và sau đó chúng ta sẽ quay lại và

54
00:05:43,645 --> 00:05:47,225
xem băng chuyền trông như thế nào.

55
00:05:47,225 --> 00:05:49,940
Ở đây bạn có thể thấy rằng tôi đã hoàn thành

56
00:05:49,940 --> 00:05:56,440
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.

57
00:05:56,440 --> 00:06:04,190
Hãy thêm vào một vài lớp CSS để băng chuyền được cấu trúc độc đáo.

58
00:06:04,190 --> 00:06:10,235
Vì vậy, đi đến tập tin styles.css ở dưới cùng ở đây,

59
00:06:10,235 --> 00:06:17,410
tôi sẽ thêm vào một vài lớp học nữa ở đây.

60
00:06:17,410 --> 00:06:19,710
Đối với lớp băng chuyền,

61
00:06:19,710 --> 00:06:25,310
tôi sẽ thêm nền như 512DA8,

62
00:06:25,310 --> 00:06:30,280
mà chúng tôi đã sử dụng trước lớp màu tối.

63
00:06:30,280 --> 00:06:39,825
Và sau đó đối với lớp băng chuyền,

64
00:06:39,825 --> 00:06:47,400
tôi sẽ thêm vào một chiều cao là 300 pixel.

65
00:06:48,030 --> 00:06:59,195
Và đối với hình ảnh được bao gồm bên trong mục băng chuyền,

66
00:06:59,195 --> 00:07:03,480
tôi sẽ áp dụng một vài biến đổi ở đây.

67
00:07:03,480 --> 00:07:10,830
Tôi có thể nói, vị trí tuyệt đối.

68
00:07:10,830 --> 00:07:14,360
Tôi muốn đặt nó sang bên trái.

69
00:07:19,470 --> 00:07:29,290
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

70
00:07:29,290 --> 00:07:33,700
của hộp băng chuyền ở đó và với

71
00:07:33,700 --> 00:07:41,050
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.

72
00:07:41,050 --> 00:07:45,680
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

73
00:07:45,680 --> 00:07:51,020
băng chuyền nhưng sẽ được định vị ở cạnh trái của hộp băng chuyền ở đây.

74
00:07:51,020 --> 00:07:52,820
Vì vậy, hãy để tôi lưu lại những thay đổi.

75
00:07:52,820 --> 00:07:58,235
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.

76
00:07:58,235 --> 00:07:59,770
Đi đến trang web,

77
00:07:59,770 --> 00:08:05,460
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.

78
00:08:05,460 --> 00:08:09,000
Vì vậy, bạn có thể thấy rằng băng chuyền được

79
00:08:09,000 --> 00:08:13,905
đặ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.

80
00:08:13,905 --> 00:08:16,470
Lưu ý làm thế nào bằng cách sử dụng các lớp CSS,

81
00:08:16,470 --> 00:08:21,925
tôi đã tạo kiểu nền từ băng chuyền sao cho các chú thích có

82
00:08:21,925 --> 00:08:24,745
thể nhìn thấy rõ ràng trong băng chuyền

83
00:08:24,745 --> 00:08:28,305
và cũng như cách hình ảnh đã được định vị trên băng chuyền.

84
00:08:28,305 --> 00:08:33,865
Chiều cao của slide băng chuyền này được cố định ở 300 pixel.

85
00:08:33,865 --> 00:08:37,750
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.

86
00:08:37,750 --> 00:08:42,855
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.

87
00:08:42,855 --> 00:08:46,155
Quay trở lại index.html.

88
00:08:46,155 --> 00:08:56,015
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,

89
00:08:56,015 --> 00:09:05,170
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.

90
00:09:05,170 --> 00:09:10,490
Và với các chỉ số băng chuyền lớp.

91
00:09:12,400 --> 00:09:16,570
Các chỉ báo này sẽ được đặt trên

92
00:09:16,570 --> 00:09:24,095
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ị.

93
00:09:24,095 --> 00:09:28,760
Vì vậy, hãy để tôi giới thiệu trong nội dung ở đây vì vậy tôi nói OL,

94
00:09:28,760 --> 00:09:30,630
Tôi sử dụng OL cho điều này.

95
00:09:30,630 --> 00:09:34,175
Và sau đó, bên trong đó tôi sử dụng danh sách với

96
00:09:34,175 --> 00:09:42,175
mục tiêu dữ liệu thiết lập để băng chuyền của tôi.

97
00:09:42,175 --> 00:09:49,460
Vì vậy, đây là ID của băng chuyền và dữ liệu slide-to.

98
00:09:49,460 --> 00:09:55,880
Và các chỉ số đầu tiên sẽ trượt xuống trượt số 0.

99
00:09:56,870 --> 00:10:08,080
Với lớp đó là hoạt động cho mục đầu tiên trong danh sách này,

100
00:10:08,460 --> 00:10:18,870
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

101
00:10:18,870 --> 00:10:24,510
thiết lập bằng băng chuyền của tôi

102
00:10:24,510 --> 00:10:30,310
và trượt dữ liệu được thiết lập để một.

103
00:10:30,310 --> 00:10:33,150
Vì vậy, đây là cho slide thứ hai ở đó.

104
00:10:33,150 --> 00:10:38,755
Tôi sẽ chỉ sao chép cái này và sau đó tạo ra chỉ báo thứ ba ở đây.

105
00:10:38,755 --> 00:10:47,740
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.

106
00:10:47,740 --> 00:10:54,685
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à đủ.

107
00:10:54,685 --> 00:10:58,540
Bây giờ, chúng tôi cũng sẽ thêm vào một vài điều khiển để

108
00:10:58,540 --> 00:11:02,435
băng chuyền này cho phép chúng tôi tự cuộn băng chuyền.

109
00:11:02,435 --> 00:11:06,580
Để làm điều đó, tôi sẽ giới thiệu một A với

110
00:11:06,580 --> 00:11:13,705
lớp băng chuyền điều khiển -prev ở đây.

111
00:11:13,705 --> 00:11:17,065
Vì vậy, điều này sẽ cho phép tôi đi đến slide trước đó,

112
00:11:17,065 --> 00:11:22,710
làm cho href bằng mycarousel,

113
00:11:22,710 --> 00:11:30,220
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.

114
00:11:30,220 --> 00:11:38,730
Vì vậy, điều này sẽ hoạt động như một nút và slide dữ liệu như trước.

115
00:11:38,730 --> 00:11:41,620
Vì vậy, trong A này,

116
00:11:44,530 --> 00:11:52,635
tôi sẽ giới thiệu một biểu tượng

117
00:11:52,635 --> 00:11:55,810
để đại diện điều khiển này trên màn hình.

118
00:11:55,810 --> 00:12:01,310
Vì vậy, tôi sẽ nói, span lớp băng chuyền kiểm soát -pre-biểu tượng

119
00:12:01,960 --> 00:12:12,560
và đóng khoảng ở đây.

120
00:12:12,560 --> 00:12:18,210
Bây giờ tôi sẽ sao chép điều khiển này.

121
00:12:19,890 --> 00:12:28,950
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,

122
00:12:28,950 --> 00:12:34,440
carousel-control-next và roll là một nút và slide dữ liệu được sử dụng để

123
00:12:34,440 --> 00:12:41,315
tiếp theo và biểu tượng sẽ là carousel-control-next biểu tượng.

124
00:12:41,315 --> 00:12:45,275
Vì vậy, thêm những cái này vào băng chuyền của tôi, chúng

125
00:12:45,275 --> 00:12:49,595
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.

126
00:12:49,595 --> 00:12:51,395
Đi đến băng chuyền,

127
00:12:51,395 --> 00:12:57,325
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,

128
00:12:57,325 --> 00:13:02,830
cho biết trang trình bày cụ thể nào

129
00:13:02,830 --> 00:13:08,085
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,

130
00:13:08,085 --> 00:13:11,380
sau đó chỉ báo cũng tương ứng thay đổi để

131
00:13:11,380 --> 00:13:15,150
chỉ ra trang trình bày cụ thể là có thể nhìn thấy được.

132
00:13:15,150 --> 00:13:21,810
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.

133
00:13:21,810 --> 00:13:26,320
Không chỉ vậy, bạn có thể thấy rằng bây giờ có hai chỉ số,

134
00:13:26,320 --> 00:13:27,980
bên trái và bên phải,

135
00:13:27,980 --> 00:13:32,120
mà tôi có thể sử dụng để cuộn lại qua băng chuyền bằng cách

136
00:13:32,120 --> 00:13:36,715
nhấp vào các chỉ số này ở đây.

137
00:13:36,715 --> 00:13:38,490
Vì vậy, bằng cách sử dụng

138
00:13:38,490 --> 00:13:43,660
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,

139
00:13:43,660 --> 00:13:51,155
tôi có thể điều hướng đến slide cụ thể trong băng chuyền của tôi.

140
00:13:51,155 --> 00:13:53,635
Điều này hoàn thành bài tập này.

141
00:13:53,635 --> 00:13:59,350
Đâ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.