Мы только что узнали о компоненте карусели в предыдущей лекции.
В этом упражнении мы собираемся добавить карусель на нашу
страницу index.html и в процессе узнать, как работает компонент карусели.
Переходя на страницу index.html,
мы добавим в новую строку в контент div,
как первую строку в div.
Итак, я зайду и скажу,
дайте строку класса div, а внутри этого div
мы создадим компонент карусели.
И в том, что такое div я добавлю во внутренний столбец div,
который будет содержать здесь компонент карусели.
Чтобы добавить в карусель,
здесь я добавлю в div с идентификатором мою карусель и
класс карусель и
слайд и класс передачи данных.
Таким образом, вы можете увидеть компонент JavaScript, вступающий в действие здесь,
а затем закрыть div и начать строить карусель внутри этого div здесь.
Итак, в эту карусель
мы добавим содержимое карусели.
Поэтому я войду, а затем добавлю еще один div с классом
carousel-inner и ролью в качестве списка.
Так мы создаем карусель, а затем закрываем этот div там.
И внутри этого div снова мы представим div, которые будут размещать
элементы карусели, применяя класс элемента карусели.
И первый в карусели...
Первый в классе карусели,
я применим активный класс.
Таким образом, это первый div, который
начинается, содержащий начальный слайд там и остальные, я собираюсь добавить в.
Позвольте мне добавить еще два div carousel-item
здесь и применить только первый с активным классом.
Теперь я собираюсь ввести в содержание в этой карусели элементы.
Поэтому, чтобы построить элемент карусели,
я пойду туда, а затем включу изображение с классом d-block.
Таким образом, это используется для,
это класс flex, который позволяет нашему изображению правильно позиционироваться, а затем добавить
в класс жидкости изображения, а затем источник как img.
Так что я сделаю, это переместить этот контент из
трех строк содержимого ниже, а затем добавить его в карусель здесь.
Поэтому я добавляю изображение здесь, а затем в карусель,
я также могу добавить в
div с
заголовком карусели класса.
Здесь мы можем включить некоторый текст, который будет ретранслироваться в виде подписи на изображении.
Так что я скажу надпись карусели d-none, d-md-block.
И затем внутри здесь
я включу содержимое из строк содержимого здесь.
Поэтому я зайду и скопирую содержимое из строк содержимого
здесь, а затем вставьте его в блок заголовка карусели здесь.
И я удалю класс, который мы применили к H2 из этого контента.
Теперь мы повторим то же самое для остальных двух, скопировав
содержимое из строк содержимого ниже здесь.
Итак, позвольте мне завершить это, а потом мы
вернемся и посмотрим, как выглядит карусель.
Здесь вы можете видеть, что я завершил
оставшиеся элементы карусели здесь, скопировав содержимое из строк содержимого ниже.
Давайте добавим в несколько классов CSS, чтобы карусель была красиво структурирована.
Поэтому, перейдя к файлу styles.css внизу здесь,
я собираюсь добавить еще пару классов здесь.
Для класса карусели
я бы добавил фон как 512DA8,
который мы использовали перед классом темных цветов.
А затем для класса карусельного элемента
я собираюсь добавить в высоту 300 пикселей.
И для изображения, которое включено внутри элемента карусели,
я собираюсь применить несколько преобразований здесь.
Я бы сказал, положение абсолютное.
Я хочу расположить его влево.
Таким образом, этот верхний и левый нуль поместит это изображение к верхнему левому краю
коробки карусели там и
с минимальной высотой, установленной в 300 пикселей, чтобы соответствовать высоте элементов карусели.
Таким образом, это изображение будет по существу растягивать всю высоту
карусели, но будет располагаться к левому краю коробки карусели здесь.
Так что позвольте мне сохранить изменения.
Мы просто пойдем и посмотрим, как выглядит эта карусель на нашей веб-странице.
Перейдя на веб-страницу,
теперь вы можете увидеть эту карусель в действии на нашей странице таблицы исследования индекса.
Таким образом, вы можете видеть, что карусель
находится в верхней части здесь, а затем мы будем продолжать прокручивать через регулярные промежутки времени.
Обратите внимание, что, используя классы CSS,
я стилизовал фон из карусели таким образом, что подписи
четко видны в карусели,
а также как изображение было позиционировано на карусели.
Высота этого слайда карусели фиксируется на 300 пикселей.
Таким образом, это дает хороший чистый макет для этой карусели.
Теперь давайте добавим несколько элементов управления для этой карусели.
Возвращаемся к index.html.
Сразу после карусели в нашей коробке здесь, но все еще внутри карусели,
я собираюсь добавить в ПР, чтобы ввести несколько ручных элементов управления для карусели.
И с карусельными индикаторами класса.
Эти индикаторы будут размещены на
слайдах карусели, чтобы указать, какой именно слайд в настоящее время отображается.
Так что позвольте мне ввести в содержание здесь, так что я говорю OL,
я использую OL для этого.
И затем, внутри я использую список с
целью данных, установленной в моей карусели.
Итак, это идентификатор карусели и слайд-до данных.
И первые индикаторы будут скользить, чтобы сдвинуть номер ноль.
Если этот класс активен для первого элемента в этом списке,
то оставшиеся два элемента я собираюсь просто использовать список с целевым
набором данных, равным моей карусели,
а слайд данных установлен на один.
Итак, это для второго слайда.
Я просто скопирую этот, а затем создаю третий индикатор здесь.
Итак, мы зайдем и скопируем это, а затем изменим это на слайд-данные на два.
Таким образом, у нас есть бесплатные слайды в нашей карусели, поэтому достаточно трех индикаторов.
Теперь мы также добавим пару элементов управления к
этой карусели, которая позволяет нам вручную прокручивать карусель.
Для этого я представлю A с
классом carousel-control-prev здесь.
Так что это позволит мне перейти к предыдущему слайду,
сделать href равным mycarousel,
так что вы можете видеть, что мы пытаемся нацелить карусель там и роль является кнопкой.
Таким образом, это будет действовать как кнопка и слайд данных, как предыдущий.
Итак, в этом A,
я введу значок
для представления этого элемента управления на экране.
Так что, я скажу, проложить класс карусел-контроль-пре-значок
и закрыть пролет здесь.
Теперь я скопирую этот контроль.
И вставьте его здесь, а затем создайте элемент управления для следующего слайда здесь, так что я бы сказал,
карусель-control-next и roll это кнопка, а слайд данных используется для
следующего, и значок будет карусель-control-next значок.
Так что добавляя их в мою карусель
, давайте посмотрим на нашу карусель в этот момент.
Перейдя к карусели,
теперь вы можете видеть, что в моей карусели у меня есть три кнопки индикатора,
которые указывают, какой именно слайд
в настоящее время виден в моей карусели, и как слайд,
то индикатор также соответственно изменяется, чтобы
указать, какой именно слайд видимый.
Я могу вручную нажать на один из них и перейти к определенному слайду в карусели.
Мало того, вы можете видеть, что теперь есть два индикатора,
левый и правый,
которые я могу использовать, чтобы снова прокрутить карусель,
нажав на эти индикаторы здесь.
Таким образом, используя эти элементы управления,
как предыдущий, так и следующий, и индикаторы здесь,
я могу перейти к определенному слайду в моей карусели.
Это упражнение завершается.
Это хорошее время для вас сделать git-commit с каруселью сообщений.