Карусель Bootstrap - это гибкий, отзывчивый способ добавления слайдера на ваш сайт. В дополнение к тому, чтобы быть отзывчивым, контент достаточно гибкий, чтобы позволить отображать изображения, iframe
, видео или практически любой тип контента, который вам может понадобиться.
Содержание:
Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится carousel.js
, после включения bootstrap.js
или bootstrap.min.js
.
В простом слайд-шоу ниже показан общий компонент для циклического перемещения элементов, таких как карусель, с помощью плагина Bootstrap carousel
. Чтобы реализовать карусель, вам просто нужно добавить код с разметкой. Нет необходимости в атрибутах данных, все на основе простых классов.
Дополнительные титры
Вы можете легко добавлять подписи к слайдам с элементом .carousel-caption
в любом элементе .item
. Поместите вокруг него какой-либо дополнительный HTML-код, и он будет автоматически выровнен и отформатирован. Следующий пример демонстрирует это -
Применение плагина для карусели
- Через атрибуты данных. Используйте атрибуты данных, чтобы легко управлять положением карусели.
- Атрибуты
data-slide
принимают ключевые словаprev
илиnext
, что изменяет положение слайда относительно его текущей позиции. - Используйте
data-slide-to
, чтобы передать индекс исходного слайда в каруселиdata-slide-to = "2"
, который сдвигает позицию слайда на определенный индекс, начинающийся с 0. - Атрибут
data-ride = "carousel"
используется для обозначения карусели в качестве анимации, начиная с загрузкой страницы.
- Атрибуты
- Через JavaScript. Карусель можно вызвать вручную с помощью JavaScript, как показано ниже:
Опции плагина для карусели
Существуют определенные опции, которые могут передаваться через атрибуты данных или JavaScript, перечислены в следующей таблице -
Название опции | Тип/значение по умолчанию | Имя атрибута данных | Описание |
---|---|---|---|
interval | numberDefault − 5000 | data-interval | Время задержки для автоматического переключения элемента. Если false, карусель автоматически не будет циклически изменяться. |
pause | string По умолчанию - "hover" | data-pause | Приостанавливает цикличность карусели в центре мыши и возобновляет круговое движение карусели на мышах. |
wrap | boolean Значение по умолчанию - true | data-wrap | Независимо от того, должна ли карусель непрерывно перемещаться или иметь жесткие остановки. |
Вот список полезных методов, которые можно использовать с кодом карусели.
метод | Описание | Пример |
---|---|---|
.carousel(options) | Инициализирует карусель дополнительным объектом опций и начинает циклически перемещаться по элементам. | |
.carousel('cycle') | Перебирает элементы карусели слева направо. | |
.carousel('pause') | Остановка карусели от велосипедного движения через предметы. | |
.carousel(number) | Циклы карусели к кадру (на основе 0, аналогично массиву). | |
.carousel('prev') | Перечисляет предыдущий элемент. | |
.carousel('next') | Перечисляет следующий элемент. |
Следующий пример демонстрирует использование методов -
События плагина для карусели
Карусель класса Bootstrap предоставляет два события для подключения к функциям карусели, которые перечислены в следующей таблице.
Событие | Описание | Пример |
---|---|---|
slide.bs.carousel | Это событие срабатывает немедленно при вызове метода экземпляра слайда. | |
slid.bs.carousel | Это событие запускается, когда карусель завершил переход слайда. |
Следующий пример демонстрирует использование событий -
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Предыдущие статьи
- Bootstrap - Плагин Collapse - 22/09/2018 17:33
- Бутстрап - Кнопочный плагин - 22/09/2018 17:32
- Bootstrap - Плагин Alert - 22/09/2018 17:32
- Bootstrap - Плагин Popover - 22/09/2018 17:31
- Bootstrap - Плагин для подсказки - 22/09/2018 17:31
- Bootstrap - Плагин Tab - 22/09/2018 17:30
- Bootstrap - Плагин Scrollspy - 22/09/2018 17:30
- Bootstrap - Плагин для раскрывающегося списка - 22/09/2018 17:29
- Bootstrap - Модальный плагин - 22/09/2018 17:29
- Bootstrap - Переходный плагин - 22/09/2018 17:28
- Bootstrap -Обзор плагинов - 22/09/2018 17:28
- Бутстрап – Wells - 22/09/2018 17:27
- Бутстрап - Панели - 22/09/2018 17:26
- Bootstrap - Список групп - 22/09/2018 17:26
- Bootstrap - Объект мультимедиа - 22/09/2018 17:25
- Бутстрап - Индикатор прогресса - 22/09/2018 17:25
- Бутстрап - Оповещения - 22/09/2018 17:24
- Bootstrap - Миниатюры - 22/09/2018 17:24
- Bootstrap - Заголовок страницы - 22/09/2018 17:23
- Бутстрап - Jumbotron - карточка статьи - 22/09/2018 17:23