Уроки по фреймворку Bootstrap 4
Автор учебного курса: Саакян Артак Арамович, студент гр. ИТк-401 ФГАОУ ВО «РГППУ.
Скачать Notepad++ Portable
Скачать материалы к учебному курсу - папка kurs_bootstrap.zip (1 Мб)
Урок 5. Карусель
Предварительно изучите теорию 3. Модальное окно и карусель
Карусель
Карусель в Bootstrap позволяет добавлять прокручивающиеся изображения и текст, которые появляются, останавливаются, а затем уходят. Элементы управления позволяют пользователю прокручивать вперёд или назад в пределах набора. В целом, это бегущая строка с элементами управления. Чтобы создать модальное окно, используем класс .modal совместно с другими классами .modal-*, которые определяют каждый раздел модального окна.
Чтобы создать карусель:
- применим .carousel и .slide к внешнему контейнеру (со своим собственным идентификатором);
- прокручиваемое содержимое поместим в .carousel-inner и присвоим каждому элементу класс .carousel-item;
- кроме того, мы должны применить класс .active к одному из слайдов в карусели, иначе карусель не будет видна. Данный класс позволяет установить один слайд в качестве начального.
Только слайды
Вот пример карусели, где есть только слайды. Заметьте присутствие классов .d-block и .w-100, отменяющих дефолтное выравнивание изображений в браузерах у изображений карусели.
1. Напишите <div> блок с классами .container и .slider.
2. Внутри этого блока запишите заголовок <h2> с классом .text-center и элемент <div> с классами .carousel, .slide и атрибутом data-ride="carousel". Внутри заголовка <h2> запишите «Слайдер».
3. Внутри блока .carousel напишите элемент с классом .carousel-inner
4. В этом блоке напишите 3 элемента <div> с классом .carousel-item, для первого элемента добавьте класс .active.
5. Внутри этих трех элементов добавьте тег <img> с классами .d-block, .w-100. Добавьте три любые изображения и укажите пути, также укажите название атрибута alt.
Окончательный код должен выглядеть так (рисунок 1):
<div class="container slider">
<h2 class="text-center">Слайдер</h2>
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/1.jpg" class="d-block w-100" alt="Москва">
</div>
<div class="carousel-item">
<img src="img/2.jpg" class="d-block w-100" alt="Санкт-Петербург">
</div>
<div class="carousel-item">
<img src="img/3.jpg" class="d-block w-100" alt="Долина реки">
</div>
</div>
</div>
</div>
6. Запишете CSS код к классу .slider, где укажем высоту в 720 пикселей, ширину 720 пикселей и отступ сверху в 50 пикселей.
.slider {
margin-top: 50px;
width: 720px;
height: 400px;
}
С элементами управления
7. Чтобы добавить элементы управления «Предыдущий/Следующий», нужно привязать кнопки к слайдеру. Добавьте идентификатор id="carouselControls" к элементу <div> с классом .carousel.
8. После класса .carousel-inner добавьте 2 тега <a>, для первого тега класс .carousel-control-prev и два атрибута href="#carouselControls", data-slide="prev". Для второго тега добавьте класс .carousel-control-next и два атрибута href="#carouselControls", data-slide="next". Атрибут должен совпадать с идентификатором, которое мы писали выше, иначе кнопки не будут работать.
9. Внутри тегов <a> добавьте элемент <span> с классом .carousel-control-prev-icon.
Окончательный код должен выглядеть так (рисунок 2):
<a class="carousel-control-prev" href="#carouselControls" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#carouselControls" data-slide="next"> <span class="carousel-control-next-icon"></span> </a>
Добавление индикаторов
10. Чтобы добавить элемент управления «индикатор» (маленькие кликабельные области внизу по центру), вставим список с .carousel-indicators, а также соответствующие атрибуты data-target и data-slide-to.
11. Чтобы добавить элемент управления «индикатор» (маленькие кликабельные области внизу по центру), напиште перед закрывающим div с классом .carousel элемент <ol> с классом .carousel-indicators и внутри этого добавьте 3 тега <li> с атрибутом data-target="#carouselControls". Для первого тега <li> добавьте класс .actvie и атрибут data-slide-to="0", для второго тега атрибут data-slide-to="1" и для третьего атрибут data-slide-to="2" (рисунок 3).
<ol class="carousel-indicators"> <li data-target="#carouselControls" data-slide-to="0" class="active"></li> <li data-target="#carouselControls" data-slide-to="1"></li> <li data-target="#carouselControls" data-slide-to="2"></li> </ol>
Подписи
Также можем включить подписи к своему слайд-шоу, добавив <div> с классом .carousel-caption. Он входит в каждый .carousel-item
12. Чтобы добавить подписи к изображениям, нужно будет после элемента <img> добавить тег <div> с классом .carousel-caption, .d-none, .d-md-block и внутри добавить заголовок и абзац.
Подписи будут видны, если ширина экрана будет ? 768 пикселей, если значение будет меньше, то подписи будут не видны (рисунок 4).
<div class="carousel-item active">
<img src="img/1.jpg" class="d-block w-100" alt="Москва">
<div class="carousel-caption d-none d-md-block">
<h3>Метка первого слайда</h3>
<p>Некоторый репрезентативный заполнитель для первого слайда.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/2.jpg" class="d-block w-100" alt="Санкт-Петербург">
<div class="carousel-caption d-none d-md-block">
<h3>Метка второго слайда</h3>
<p>Некоторый репрезентативный заполнитель для второго слайда.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/3.jpg" class="d-block w-100" alt="Долина реки">
<div class="carousel-caption d-none d-md-block">
<h3>Метка третьего слайда</h3>
<p>Некоторый репрезентативный заполнитель для третьего слайда.</p>
</div>
</div>
Контрольное задание
- Самостоятельно напишите карусель из 10 слайдов, с кнопками назад и вперед
- Добавьте к карусели индикаторы и надписи