1
00:00:03,650 --> 00:00:09,125
Мы только что узнали о компоненте карусели в предыдущей лекции.

2
00:00:09,125 --> 00:00:14,324
В этом упражнении мы собираемся добавить карусель на нашу

3
00:00:14,324 --> 00:00:20,760
страницу index.html и в процессе узнать, как работает компонент карусели.

4
00:00:20,760 --> 00:00:24,090
Переходя на страницу index.html,

5
00:00:24,090 --> 00:00:29,640
мы добавим в новую строку в контент div,

6
00:00:29,640 --> 00:00:31,730
как первую строку в div.

7
00:00:31,730 --> 00:00:33,595
Итак, я зайду и скажу,

8
00:00:33,595 --> 00:00:43,535
дайте строку класса div, а внутри этого div

9
00:00:43,535 --> 00:00:47,545
мы создадим компонент карусели.

10
00:00:47,545 --> 00:00:56,925
И в том, что такое div я добавлю во внутренний столбец div,

11
00:00:56,925 --> 00:01:02,045
который будет содержать здесь компонент карусели.

12
00:01:02,045 --> 00:01:04,135
Чтобы добавить в карусель,

13
00:01:04,135 --> 00:01:13,630
здесь я добавлю в div с идентификатором мою карусель и

14
00:01:13,630 --> 00:01:17,440
класс карусель и

15
00:01:17,440 --> 00:01:24,170
слайд и класс передачи данных.

16
00:01:24,170 --> 00:01:33,110
Таким образом, вы можете увидеть компонент JavaScript, вступающий в действие здесь,

17
00:01:33,110 --> 00:01:42,420
а затем закрыть div и начать строить карусель внутри этого div здесь.

18
00:01:42,420 --> 00:01:44,995
Итак, в эту карусель

19
00:01:44,995 --> 00:01:49,580
мы добавим содержимое карусели.

20
00:01:49,580 --> 00:01:54,700
Поэтому я войду, а затем добавлю еще один div с классом

21
00:01:56,740 --> 00:02:07,815
carousel-inner и ролью в качестве списка.

22
00:02:07,815 --> 00:02:15,380
Так мы создаем карусель, а затем закрываем этот div там.

23
00:02:15,380 --> 00:02:22,955
И внутри этого div снова мы представим div, которые будут размещать

24
00:02:22,955 --> 00:02:32,855
элементы карусели, применяя класс элемента карусели.

25
00:02:32,855 --> 00:02:37,120
И первый в карусели...

26
00:02:37,240 --> 00:02:41,080
Первый в классе карусели,

27
00:02:41,080 --> 00:02:42,595
я применим активный класс.

28
00:02:42,595 --> 00:02:48,235
Таким образом, это первый div, который

29
00:02:48,235 --> 00:02:56,650
начинается, содержащий начальный слайд там и остальные, я собираюсь добавить в.

30
00:02:56,650 --> 00:03:09,680
Позвольте мне добавить еще два div carousel-item

31
00:03:09,680 --> 00:03:16,630
здесь и применить только первый с активным классом.

32
00:03:16,630 --> 00:03:21,445
Теперь я собираюсь ввести в содержание в этой карусели элементы.

33
00:03:21,445 --> 00:03:25,165
Поэтому, чтобы построить элемент карусели,

34
00:03:25,165 --> 00:03:33,770
я пойду туда, а затем включу изображение с классом d-block.

35
00:03:33,770 --> 00:03:35,655
Таким образом, это используется для,

36
00:03:35,655 --> 00:03:43,930
это класс flex, который позволяет нашему изображению правильно позиционироваться, а затем добавить

37
00:03:43,930 --> 00:03:53,240
в класс жидкости изображения, а затем источник как img.

38
00:03:58,220 --> 00:04:03,595
Так что я сделаю, это переместить этот контент из

39
00:04:03,595 --> 00:04:09,020
трех строк содержимого ниже, а затем добавить его в карусель здесь.

40
00:04:15,470 --> 00:04:21,710
Поэтому я добавляю изображение здесь, а затем в карусель,

41
00:04:21,710 --> 00:04:23,340
я также могу добавить в

42
00:04:23,340 --> 00:04:28,200
div с

43
00:04:28,200 --> 00:04:34,030
заголовком карусели класса.

44
00:04:34,030 --> 00:04:38,780
Здесь мы можем включить некоторый текст, который будет ретранслироваться в виде подписи на изображении.

45
00:04:38,780 --> 00:04:48,450
Так что я скажу надпись карусели d-none, d-md-block.

46
00:04:48,740 --> 00:04:52,555
И затем внутри здесь

47
00:04:52,555 --> 00:04:59,490
я включу содержимое из строк содержимого здесь.

48
00:04:59,490 --> 00:05:04,600
Поэтому я зайду и скопирую содержимое из строк содержимого

49
00:05:04,600 --> 00:05:14,330
здесь, а затем вставьте его в блок заголовка карусели здесь.

50
00:05:25,320 --> 00:05:32,315
И я удалю класс, который мы применили к H2 из этого контента.

51
00:05:32,315 --> 00:05:35,850
Теперь мы повторим то же самое для остальных двух, скопировав

52
00:05:35,850 --> 00:05:40,820
содержимое из строк содержимого ниже здесь.

53
00:05:40,820 --> 00:05:43,645
Итак, позвольте мне завершить это, а потом мы

54
00:05:43,645 --> 00:05:47,225
вернемся и посмотрим, как выглядит карусель.

55
00:05:47,225 --> 00:05:49,940
Здесь вы можете видеть, что я завершил

56
00:05:49,940 --> 00:05:56,440
оставшиеся элементы карусели здесь, скопировав содержимое из строк содержимого ниже.

57
00:05:56,440 --> 00:06:04,190
Давайте добавим в несколько классов CSS, чтобы карусель была красиво структурирована.

58
00:06:04,190 --> 00:06:10,235
Поэтому, перейдя к файлу styles.css внизу здесь,

59
00:06:10,235 --> 00:06:17,410
я собираюсь добавить еще пару классов здесь.

60
00:06:17,410 --> 00:06:19,710
Для класса карусели

61
00:06:19,710 --> 00:06:25,310
я бы добавил фон как 512DA8,

62
00:06:25,310 --> 00:06:30,280
который мы использовали перед классом темных цветов.

63
00:06:30,280 --> 00:06:39,825
А затем для класса карусельного элемента

64
00:06:39,825 --> 00:06:47,400
я собираюсь добавить в высоту 300 пикселей.

65
00:06:48,030 --> 00:06:59,195
И для изображения, которое включено внутри элемента карусели,

66
00:06:59,195 --> 00:07:03,480
я собираюсь применить несколько преобразований здесь.

67
00:07:03,480 --> 00:07:10,830
Я бы сказал, положение абсолютное.

68
00:07:10,830 --> 00:07:14,360
Я хочу расположить его влево.

69
00:07:19,470 --> 00:07:29,290
Таким образом, этот верхний и левый нуль поместит это изображение к верхнему левому краю

70
00:07:29,290 --> 00:07:33,700
коробки карусели там и

71
00:07:33,700 --> 00:07:41,050
с минимальной высотой, установленной в 300 пикселей, чтобы соответствовать высоте элементов карусели.

72
00:07:41,050 --> 00:07:45,680
Таким образом, это изображение будет по существу растягивать всю высоту

73
00:07:45,680 --> 00:07:51,020
карусели, но будет располагаться к левому краю коробки карусели здесь.

74
00:07:51,020 --> 00:07:52,820
Так что позвольте мне сохранить изменения.

75
00:07:52,820 --> 00:07:58,235
Мы просто пойдем и посмотрим, как выглядит эта карусель на нашей веб-странице.

76
00:07:58,235 --> 00:07:59,770
Перейдя на веб-страницу,

77
00:07:59,770 --> 00:08:05,460
теперь вы можете увидеть эту карусель в действии на нашей странице таблицы исследования индекса.

78
00:08:05,460 --> 00:08:09,000
Таким образом, вы можете видеть, что карусель

79
00:08:09,000 --> 00:08:13,905
находится в верхней части здесь, а затем мы будем продолжать прокручивать через регулярные промежутки времени.

80
00:08:13,905 --> 00:08:16,470
Обратите внимание, что, используя классы CSS,

81
00:08:16,470 --> 00:08:21,925
я стилизовал фон из карусели таким образом, что подписи

82
00:08:21,925 --> 00:08:24,745
четко видны в карусели,

83
00:08:24,745 --> 00:08:28,305
а также как изображение было позиционировано на карусели.

84
00:08:28,305 --> 00:08:33,865
Высота этого слайда карусели фиксируется на 300 пикселей.

85
00:08:33,865 --> 00:08:37,750
Таким образом, это дает хороший чистый макет для этой карусели.

86
00:08:37,750 --> 00:08:42,855
Теперь давайте добавим несколько элементов управления для этой карусели.

87
00:08:42,855 --> 00:08:46,155
Возвращаемся к index.html.

88
00:08:46,155 --> 00:08:56,015
Сразу после карусели в нашей коробке здесь, но все еще внутри карусели,

89
00:08:56,015 --> 00:09:05,170
я собираюсь добавить в ПР, чтобы ввести несколько ручных элементов управления для карусели.

90
00:09:05,170 --> 00:09:10,490
И с карусельными индикаторами класса.

91
00:09:12,400 --> 00:09:16,570
Эти индикаторы будут размещены на

92
00:09:16,570 --> 00:09:24,095
слайдах карусели, чтобы указать, какой именно слайд в настоящее время отображается.

93
00:09:24,095 --> 00:09:28,760
Так что позвольте мне ввести в содержание здесь, так что я говорю OL,

94
00:09:28,760 --> 00:09:30,630
я использую OL для этого.

95
00:09:30,630 --> 00:09:34,175
И затем, внутри я использую список с

96
00:09:34,175 --> 00:09:42,175
целью данных, установленной в моей карусели.

97
00:09:42,175 --> 00:09:49,460
Итак, это идентификатор карусели и слайд-до данных.

98
00:09:49,460 --> 00:09:55,880
И первые индикаторы будут скользить, чтобы сдвинуть номер ноль.

99
00:09:56,870 --> 00:10:08,080
Если этот класс активен для первого элемента в этом списке,

100
00:10:08,460 --> 00:10:18,870
то оставшиеся два элемента я собираюсь просто использовать список с целевым

101
00:10:18,870 --> 00:10:24,510
набором данных, равным моей карусели,

102
00:10:24,510 --> 00:10:30,310
а слайд данных установлен на один.

103
00:10:30,310 --> 00:10:33,150
Итак, это для второго слайда.

104
00:10:33,150 --> 00:10:38,755
Я просто скопирую этот, а затем создаю третий индикатор здесь.

105
00:10:38,755 --> 00:10:47,740
Итак, мы зайдем и скопируем это, а затем изменим это на слайд-данные на два.

106
00:10:47,740 --> 00:10:54,685
Таким образом, у нас есть бесплатные слайды в нашей карусели, поэтому достаточно трех индикаторов.

107
00:10:54,685 --> 00:10:58,540
Теперь мы также добавим пару элементов управления к

108
00:10:58,540 --> 00:11:02,435
этой карусели, которая позволяет нам вручную прокручивать карусель.

109
00:11:02,435 --> 00:11:06,580
Для этого я представлю A с

110
00:11:06,580 --> 00:11:13,705
классом carousel-control-prev здесь.

111
00:11:13,705 --> 00:11:17,065
Так что это позволит мне перейти к предыдущему слайду,

112
00:11:17,065 --> 00:11:22,710
сделать href равным mycarousel,

113
00:11:22,710 --> 00:11:30,220
так что вы можете видеть, что мы пытаемся нацелить карусель там и роль является кнопкой.

114
00:11:30,220 --> 00:11:38,730
Таким образом, это будет действовать как кнопка и слайд данных, как предыдущий.

115
00:11:38,730 --> 00:11:41,620
Итак, в этом A,

116
00:11:44,530 --> 00:11:52,635
я введу значок

117
00:11:52,635 --> 00:11:55,810
для представления этого элемента управления на экране.

118
00:11:55,810 --> 00:12:01,310
Так что, я скажу, проложить класс карусел-контроль-пре-значок

119
00:12:01,960 --> 00:12:12,560
и закрыть пролет здесь.

120
00:12:12,560 --> 00:12:18,210
Теперь я скопирую этот контроль.

121
00:12:19,890 --> 00:12:28,950
И вставьте его здесь, а затем создайте элемент управления для следующего слайда здесь, так что я бы сказал,

122
00:12:28,950 --> 00:12:34,440
карусель-control-next и roll это кнопка, а слайд данных используется для

123
00:12:34,440 --> 00:12:41,315
следующего, и значок будет карусель-control-next значок.

124
00:12:41,315 --> 00:12:45,275
Так что добавляя их в мою карусель

125
00:12:45,275 --> 00:12:49,595
, давайте посмотрим на нашу карусель в этот момент.

126
00:12:49,595 --> 00:12:51,395
Перейдя к карусели,

127
00:12:51,395 --> 00:12:57,325
теперь вы можете видеть, что в моей карусели у меня есть три кнопки индикатора,

128
00:12:57,325 --> 00:13:02,830
которые указывают, какой именно слайд

129
00:13:02,830 --> 00:13:08,085
в настоящее время виден в моей карусели, и как слайд,

130
00:13:08,085 --> 00:13:11,380
то индикатор также соответственно изменяется, чтобы

131
00:13:11,380 --> 00:13:15,150
указать, какой именно слайд видимый.

132
00:13:15,150 --> 00:13:21,810
Я могу вручную нажать на один из них и перейти к определенному слайду в карусели.

133
00:13:21,810 --> 00:13:26,320
Мало того, вы можете видеть, что теперь есть два индикатора,

134
00:13:26,320 --> 00:13:27,980
левый и правый,

135
00:13:27,980 --> 00:13:32,120
которые я могу использовать, чтобы снова прокрутить карусель,

136
00:13:32,120 --> 00:13:36,715
нажав на эти индикаторы здесь.

137
00:13:36,715 --> 00:13:38,490
Таким образом, используя эти элементы управления,

138
00:13:38,490 --> 00:13:43,660
как предыдущий, так и следующий, и индикаторы здесь,

139
00:13:43,660 --> 00:13:51,155
я могу перейти к определенному слайду в моей карусели.

140
00:13:51,155 --> 00:13:53,635
Это упражнение завершается.

141
00:13:53,635 --> 00:13:59,350
Это хорошее время для вас сделать git-commit с каруселью сообщений.