Как создать карусель в Bootstrap 5?

<

div itemprop=»articleBody»>

Карусель — это компонент JavaScript в Bootstrap, который позволяет добавлять слайдер на ваш сайт. Это работает на основе преобразования CSS 3D и позволяет добавлять различные варианты слайд-шоу. По умолчанию карусель занимает всю ширину экрана, при необходимости вы должны ограничить ширину с помощью дополнительных CSS. В этой статье мы объясним, как создать карусель в Bootstrap 5, и вы можете скачать примеры, используемые в этом руководстве. здесь.

Это руководство охватывает следующие главы:

  1. Основы карусельного компонента
  2. Простая карусель со слайдами, показывающими элементы управления и текст
  3. Карусель со слайдами и стрелками навигации
  4. Карусель со слайдами и индикаторами внизу
  5. Добавление подписей к изображениям слайдов в качестве заголовка и описания
  6. Варианты управления
  • Карусель Bootstrap 5 использует 3D-преобразование CSS и JavaScript для создания слайд-шоу. Поэтому вы должны включить файлы jQuery и bootstrap.min.js в свой HTML-шаблон для использования компонента карусели. Обратитесь к нашему начальному шаблону Bootstrap 5, чтобы получить формат начального шаблона.
  • По умолчанию слайды будут вращаться справа налево, и вращение останавливается при наведении курсора мыши.
  • Слайды в карусели не будут вращаться, если карусель не отображается в браузере. Это работает во всех современных браузерах, использующих API видимости страницы.
  • Размер слайдов должен быть четко определен.
  • Используйте класс img-fluid, чтобы карусель работала на всех устройствах.

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

<

div>.

2. Простая карусель только для слайдов

Это минимальный стиль карусели, в котором автоматически вращаются только изображения слайдов. Код для карусели только со слайдами приведен ниже:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Carousel -->
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
</div>
<!-- End of Carousel -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

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

Карусель только для слайдов
  • Карусель начинается с тега , имеющего уникальный идентификатор. В нашем примере #slider — это идентификатор. Тот же должен включать классы «.карусель«а также «.горка”И атрибут data-ride = «карусель».
  • Затем внутренний тег div с «.carousel-внутренний”И атрибут роль = «список».
  • Затем еще один div для каждого элемента карусели с классом «.carousel-item«.
  • Тег img имеет «.d-блок«а также «.img-жидкость”, Чтобы правильно выровнять изображения в браузере.

Примечание: Используйте коды в следующих разделах между началом и концом разделов карусели в приведенном выше простом коде карусели.

3. Карусель с навигационной стрелкой.

Давайте добавим стрелки навигации влево и вправо на слайды карусели.

<div id="arrowslider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#arrowslider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous Slide</span>
</a>
<a class="carousel-control-next" href="#arrowslider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next Slide</span>
</a>
</div>
Карусель со стрелками

По сути, вы должны добавить дополнительный код перед внешним тегом

<

div>, сохраняя все остальные элементы карусели, аналогичные предыдущему примеру слайда. Стрелки навигации основаны на тегах привязки HTML и используют класс «.carousel-control-prev» а также «.carousel-control-next«. Не забудьте включить атрибут href, такой же, как идентификатор основного контейнера карусели, как для предыдущей, так и для следующей стрелки.

Для стрелок «назад» и «вперед» используются два тега span, которые включают значки и текст программы чтения с экрана.

4. Карусель с индикаторами

Третий вариант карусели — добавить индикаторы слайдов внизу по центру изображений. Это поможет перейти к конкретному изображению вместо использования стрелок для перемещения по одному.

<div id="sliderindicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderindicators" data-slide-to="0" class="active"></li>
<li data-target="#sliderindicators" data-slide-to="1"></li>
<li data-target="#sliderindicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#sliderindicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#sliderindicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Карусель с индикаторами

Индикаторы слайдера работают по упорядоченному списку. Тег

<

ol> использует класс «.carousel-индикаторы”И каждый тег

  • в списке должен содержать две вещи:
    • В цель данных атрибут, значение которого должно быть таким же, как у основного идентификатора карусели.
    • В слайд-данные в с первым значением 0 и увеличенным до 1 и 2 для следующих двух слайдов.

    Помните «.active»Включен в первое изображение, чтобы начать карусель на первом слайде. Вы можете сделать любой слайд активным, чтобы начать слайд-шоу с этого слайда.

    5. Карусель с субтитрами.

    Последний вариант — добавить заголовок и описание к изображениям, как показано ниже:

    Карусель с субтитрами

    Код карусели с подписями приведен ниже:

    <div id="slidercaption" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#slidercaption" data-slide-to="0" class="active"></li>
    <li data-target="#slidercaption" data-slide-to="1"></li>
    <li data-target="#slidercaption" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
    <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
    <div class="carousel-caption d-none d-md-block">
    <h3>Here is a caption for slide 1</h3>
    <p>Here is short description for slide 1</p>
    </div>
    </div>
    <div class="carousel-item">
    <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
    <div class="carousel-caption d-none d-md-block">
    <h3>Here is a caption for slide 2</h3>
    <p>Here is short description for slide 2</p>
    </div>
    </div>
    <div class="carousel-item">
    <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
    <div class="carousel-caption d-none d-md-block">
    <h3>Here is a caption for slide 3</h3>
    <p>Here is short description for slide 3</p>
    </div>
    </div>
    </div>
    <a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>

    Вам нужно просто добавить новый

    в каждый элемент карусели под тегом и использовать класс «.carousel-caption«. Класс «.d-none»Используется, чтобы скрыть подписи карусели на небольших мобильных устройствах и вернуть их на устройства среднего размера с помощью«.d-md-block«. Вы можете удалить ».d-none» а также».d-md-block”Классы для отображения заголовков слайдеров на всех экранах, включая мобильные устройства. Но убедитесь, что вы используете настраиваемые медиа-запросы CSS для настройки размера шрифта и выравнивания заголовков слайдеров.

    6. Параметры управления каруселью

    Ниже приведены некоторые элементы управления, которые можно использовать для изменения работы компонента карусели Bootstrap 5.

    Название КонтроляТипЗначение по умолчаниюКраткое описание
    интервал данныхномер5000Временная задержка в миллисекундах между вращением изображений карусели. Вы можете установить это значение в false, чтобы остановить автоповорот.
    клавиатура данныхлогическийправдаИстинное значение указывает, что карусель будет реагировать на клавиши клавиатуры и «ложный”Отключит управление с клавиатуры.
    пауза данныхнить«Парить»Это элемент управления для приостановки ползунка при наведении курсора мыши на событие. Установка значения на «ноль”Не будет останавливать ползунки, а установка наведения будет приостанавливаться при наведении курсора мыши.
    передача данныхнитьложныйУстановка значения на «карусель”Включит автовоспроизведение при загрузке. А установка значения «false» запустит режим автовоспроизведения только после того, как пользователь вручную переключит первый элемент.
    перенос данныхлогическийправдаРешает, что карусель должна зацикливаться непрерывно или иметь жесткие остановки.

    Например, добавьте в свой HTML-шаблон приведенный ниже сценарий, чтобы изменить интервал ползунка карусели на 1500 миллисекунд.

    <script>
    $('.carousel').carousel({
      interval: 1500
    })
    </script>

    Изучите Bootstrap 5 (Индекс)


  • Похожие записи

    Добавить комментарий

    Ваш адрес email не будет опубликован.