Карусель

Компонент карусель в Bootstrap позволяет добавлять прокручивающиеся изображения и текст, которые появляются, останавливаются, а затем уходят. Элементы управления позволяют пользователю прокручивать вперёд или назад в пределах набора. В целом, это бегущая строка с элементами управления.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide w-50 ml-auto mr-auto" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/27m.jpg" alt="Первый слайд"> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/28m.jpg" alt="Второй слайд"> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/30m.jpg" alt="Третий слайд"> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Объяснение

Чтобы создать типовую карусель:

  • примените .carousel и .slide к внешнему контейнеру (со своим собственным идентификатором);
  • прокручиваемое содержимое поместите в .carousel-inner и присвойте каждому элементу класс .carousel-item;
  • кроме того, вы должны применить .active к одному из слайдов в карусели, иначе карусель не будет видна. Данный класс позволяет установить один слайд в качестве начального.

Добавление элементов управления

Чтобы добавить элементы управления «Предыдущий/Следующий», используйте элемент <a> с классом .carousel-control-prev или carousel-control-next. Также добавьте <span> с .carousel-control-prev-icon или .carousel-control-next-icon.

Чтобы нацелиться на программы чтения с экрана, добавьте <span> со словами «Предыдущий» или «Следующий» и присвойте им класс .sr-only. Он скроет текст в браузерах, но оставит доступным для программ чтения с экрана.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/30m.jpg" alt="Первый слайд"> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/28m.jpg" alt="Второй слайд"> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/27m.jpg" alt="Третий слайд"> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Предыдущий</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Следующий</span> </a> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Размеры карусели

Обратите внимание, что в этих примерах я добавил несколько дополнительных классов Bootstrap для изменения размера изображений и центрирования карусели. В частности, я добавил w-50 ml-auto mr-auto к карусели и w-100 к изображениям. Это даёт карусели ширину 50%, а также левый и правый margin как auto. Изображения получают ширину 100% (то есть 100 процентов от ширины карусели).

Когда я так не делаю, элементы управления могут выходить за пределы изображения и становиться невидимыми, потому что ширина изображения уже, чем сама карусель, а элементы управления и фон являются белыми (т. е. белые на белом).

Итак, если вы обнаружили, что не видите элементы управления на карусели, убедитесь, что они не выходят за пределы изображения. В зависимости от изображений и контекста, в котором они отображаются, понадобится изменить размер изображений или карусели.

Добавление индикаторов

Чтобы добавить элемент управления «индикатор» (маленькие кликабельные области внизу по центру), вставьте список с .carousel-indicators, а также соответствующие атрибуты data-target и data-slide-to.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/23m.jpg" alt="Первый слайд"> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/22m.jpg" alt="Второй слайд"> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/32m.jpg" alt="Третий слайд"> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Предыдущий</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Следующий</span> </a> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Подписи

Вы можете включить подписи к своему слайд-шоу, добавив <div> с классом .carousel-caption. Он входит в каждый .carousel-item.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/22m.jpg" alt="Первый слайд"> <div class="carousel-caption"> <h3>Первый слайд</h3> <p>Это первый слайд.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/23m.jpg" alt="Второй слайд"> <div class="carousel-caption"> <h3>Второй слайд</h3> <p>Это второй слайд.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/26m.jpg" alt="Третий слайд"> <div class="carousel-caption"> <h3>Третий слайд</h3> <p>Это третий слайд.</p> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Предыдущий</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Следующий</span> </a> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 использует .item для каждого элемента карусели, Bootstrap 4 использует .carousel-item для каждого элемента карусели.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты