Карусель

Карусель - это слайд-шоу для циклического просмотра серии контента, созданного с помощью преобразований CSS 3D. Он работает с серией изображений, текста или пользовательской разметки. Он также включает поддержку элементов управления и индикаторов «предыдущий / следующий».

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Текстовые слайды с изображением -->
      <b-carousel-slide
        caption="Первый слайд"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Слайды с произвольным текстом -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Привет мир!</h1>
      </b-carousel-slide>

      <!-- Слайды только с изображением -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Слайды со слотом img -->
      <!-- Обратите внимание на классы .d-block и .img-fluid, чтобы предотвратить выравнивание изображений по умолчанию в браузере -->
      <b-carousel-slide>
        <template #img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="слот изображения"
          >
        </template>
      </b-carousel-slide>

      <!-- Слайд с пустым плавным изображением для сохранения пропорций слайда -->
      <b-carousel-slide caption="Пустое изображение" img-blank img-alt="Пустое изображение">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Слайд #: {{ slide }}<br>
      Слайдинг: {{ sliding }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart(slide) {
        this.sliding = true
      },
      onSlideEnd(slide) {
        this.sliding = false
      }
    }
  }
</script>

<!-- b-carousel.vue -->

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

Размеры

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

При использовании img-src или img-blank на <b-carousel-slide>, вы можете установить ширину и высоту изображения с помощью свойств img-width и img-height на <b-carousel> и эти значения автоматически применяются к каждому изображению carousel-slide.

Обратите внимание, что изображения по-прежнему будут реагировать и автоматически увеличиваться или уменьшаться, чтобы соответствовать ширине родительского контейнера.

Внутренне <b-carousel-slide> использует компонент <b-img> для рендеринга изображений. Свойства img-* сопоставляются с соответствующими свойствами, доступными для <b-img>.

Интервал

По умолчанию для карусели установлен интервал 5000мс (5 секунд). Вы можете изменить интервал между слайдами, установив для свойства interval желаемое количество миллисекунд. Наименьший поддерживаемый интервал скольжения составляет 1000 мс (1 секунда).

В браузерах, где поддерживается API видимости страницы, карусель не будет скользить, когда веб-страница не видна пользователю (например, когда браузер вкладка неактивна, окно браузера свернуто и т. д.). Скольжение возобновится, когда активна вкладка браузера.

Приостановка карусели

Чтобы приостановить автоматическое скольжение карусели, установите для свойства interval значение 0. Чтобы перезапустить приостановленную карусель, установите интервал interval обратно на желаемое количество мс.

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

Когда пользовательская мышь наводит курсор на карусель, она автоматически приостанавливается и автоматически перезапускается, когда мышь покидает карусель. Чтобы отключить эту функцию, установите свойство no-hover-pause на <b-carousel>.

Управление и индикаторы

Установите свойство controls, чтобы включить предыдущую и следующую кнопки управления.

Установите свойство indicators, чтобы отображать кнопки индикатора слайда.

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

Содержимое слайдов карусели

b-carousel-slide предоставляет несколько свойств и слотов для размещения содержимого на слайде.

Свойства

  • caption Текст для использования в качестве основного заголовка на слайде (помещается внутри внутреннего элемента, имеющего класс carousel-caption)
  • text Текстовый текст, помещаемый под заголовком (помещается внутри внутреннего элемента, имеющего класс carousel-caption)
  • img-src URL-адрес изображения, которое будет помещено в фон слайда
  • caption-html Альтернативное свойство для свойства caption, которое поддерживает строки HTML
  • html Альтернативное свойство для свойства text, которое поддерживает строки HTML

Предупреждение: будьте осторожны при использовании свойств caption-html и html для отображения контента, предоставленного пользователем, так как это может сделать ваше приложение уязвимым для XSS атаки, если вы не сначала очистите введенную пользователем строку.

Именованные слоты

  • содержимое default, которое будет помещено внутри внутреннего элемента, имеющего класс carousel-caption. Появляется после любого содержимого из свойств caption и text.
  • содержимое img для размещения на фоне слайда. Несмотря на название слота, вы можете разместить в нем практически любой контент вместо использования слота defaultили свойств caption и text.

Анимация карусели

Карусель по умолчанию использует скользящую анимацию. Вы можете изменить слайд-анимацию на плавную или полностью отключить анимацию.

Кроссфейдная анимация

Установите для свойства <b-carousel> fade значение true для анимации слайдов с постепенным переходом вместо стандартной анимации слайдов.

<div>
  <b-carousel
    id="carousel-fade"
    style="text-shadow: 0px 0px 2px #000"
    fade
    indicators
    img-width="1024"
    img-height="480"
  >
    <b-carousel-slide
      caption="Первый слайд"
      img-src="https://picsum.photos/1024/480/?image=10"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Второй слайд"
      img-src="https://picsum.photos/1024/480/?image=12"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Третий слайд"
      img-src="https://picsum.photos/1024/480/?image=22"
    ></b-carousel-slide>
  </b-carousel>
</div>

<!-- b-carousel-fade.vue -->

Отключить анимацию

Установите для свойства <b-carousel> no-animation значение true, чтобы отключить анимацию слайдов.

<div>
  <b-carousel
    id="carousel-no-animation"
    style="text-shadow: 0px 0px 2px #000"
    no-animation
    indicators
    img-width="1024"
    img-height="480"
  >
    <b-carousel-slide
      caption="Первый слайд"
      img-src="https://picsum.photos/1024/480/?image=10"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Второй слайд"
      img-src="https://picsum.photos/1024/480/?image=12"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Третий слайд"
      img-src="https://picsum.photos/1024/480/?image=22"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Четвертый слайд"
      img-src="https://picsum.photos/1024/480/?image=23"
    ></b-carousel-slide>
  </b-carousel>
</div>

<!-- b-carousel-no-animation.vue -->

Обертывание слайдов

Обычно, когда карусель достигает одного или другого конца в списке слайдов, она переходит к противоположному концу списка слайдов и продолжает цикл.

Чтобы отключить перенос слайдов карусели, установите для свойства no-wrap значения true.

Скрыть текстовое содержимое слайдов на маленьких экранах

На небольших экранах вы можете скрыть подписи и заголовки. Вы можете сделать это с помощью свойства content-visible-up объекта <b-carousel-slide>. Свойство принимает имя контрольной точки (например, sm, md, lg, xlили пользовательские имена контрольных точек, если вы их определили) и скроет заголовки и подписи на экранах, которые меньше, чем контрольная точка.

Поддержка сенсорного пролистывания

На устройствах с сенсорным экраном пользователи могут переключать слайды, проводя пальцем влево или вправо по карусели. Чтобы отключить сенсорное управление, установите для свойства no-touch значение true.

Поддержка v-model

Программно управлять отображаемым слайдом с помощью v-model (которая привязывается к свойству value). Обратите внимание, что слайды индексируются, начиная с 0.

Программное управление слайдами

Экземпляр <b-carousel> предоставляет несколько общедоступных методов для управления скольжением:

Метод Описание
setSlide(index) Перейти к слайду, указанному index
next() Перейти к следующему слайду
prev() Перейти к предыдущему слайду
pause() Приостановить слайд-цикл
start() Начать чередование слайдов (свойство interval должно иметь значение)

Вам понадобится ссылка (через this.$refs) на экземпляр карусели для вызова этих методов:

<template>
  <b-carousel ref="myCarousel" .... >
    <!-- слайды идут сюда -->
  </b-carousel>
</template>

<script>
  export default {
    // ...
    methods: {
      prev() {
        this.$refs.myCarousel.prev()
      },
      next() {
        this.$refs.myCarousel.next()
      }
    }
  }
</script>

Доступность

Карусели, как правило, не полностью соответствуют стандартам доступности, хотя мы стараемся сделать их максимально доступными.

Предоставляя уникальное значение документа через свойство id, <b-carousel> активирует специальные возможности. Настоятельно рекомендуется всегда добавлять идентификатор ко всем компонентам.

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

Примечание: Эффект анимации этого компонента зависит от медиа-запроса prefers-reduced-motion. Смотрите раздел с сокращенным движением в нашей документации по специальным возможностям для получения дополнительных сведений.

Справочник по компонентам

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
background
StringУстановите цвет CSS для фона карусели
controls
BooleanfalseВключить предыдущий и следующий элементы управления
fade
BooleanfalseЕсли установлено, изменяет анимацию слайда на перекрестное затухание вместо эффекта скольжения
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
img-height
Number или StringУстановите атрибут изображения 'height' для всех дочерних элементов b-tab
img-width
Number или StringУстановите атрибут изображения 'width' для всех дочерних элементов b-tab
indicators
BooleanfalseВключите кнопки индикатора для перехода к определенным слайдам
interval
Number5000Установите время задержки (в миллисекундах) между слайдами
label-goto-slide
String'Goto slide'Устанавливает префикс для 'aria-label' на элементах управления индикатором слайда. Будет добавлен суффикс с номером слайда (1 проиндексирован)
label-indicators
String'Select a slide to display'Устанавливает 'aria-label' на оболочке элементов управления индикатора
label-next
String'Next slide'Устанавливает значение 'aria-label' для следующего элемента управления слайдом
label-prev
String'Previous slide'Устанавливает значение 'aria-label' для предыдущего элемента управления слайдом
no-animation
BooleanfalseЕсли установлено, отключает анимацию при переходе между слайдами
no-hover-pause
BooleanfalseЕсли задано, отключает приостановку слайд-шоу при наведении курсора на текущий слайд
no-touch
BooleanfalseОтключить управление слайдами с помощью сенсорных движений
no-wrap
v2.0.0+
BooleanfalseНе перезапускайте слайд-шоу, когда будет достигнут конец
value
v-model
Number0Текущий активный слайд (с нулевым индексом)
Свойство
Событие
valueinput
Наименование
Описание
default Контент (слайды) для размещения в карусели
Событие
Аргументы
Описание
sliding-end
  1. slide - Номер слайда, на который был сдвинут
Генерируется при завершении перехода к новому слайду
sliding-start
  1. slide - Номер слайда, на который перемещается
Генерируется, когда начался переход к новому слайду

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
background
StringЦвет CSS для использования в качестве цвета фона слайда
caption
StringТекстовый контент для размещения в подписи
caption-html
Использовать с осторожностью
StringСодержимое строки HTML для размещения в подписи
caption-tag
String'h3'Укажите тег HTML для отображения вместо тега по умолчанию для оболочки заголовка
content-tag
String'div'Укажите тег HTML для отображения вместо тега по умолчанию для оболочки содержимого
content-visible-up
StringУкажите контрольную точку, с которой будет отображаться текстовое содержимое. Оставьте значение по умолчанию, чтобы всегда отображать текстовое содержимое
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
img-alt
StringУстанавливает значение атрибута 'alt' на изображении
img-blank
BooleanfalseЕсли установлено, будет отображаться пустое изображение вместо img-src
img-blank-color
String'transparent'Установите цвет CSS для использования в качестве заливки пустого изображения
img-height
Number или StringУстановите атрибут изображения 'height' по умолчанию для всех дочерних элементов
img-src
StringУстанавливает URL-адрес изображения
img-width
Number или StringУстановите атрибут изображения 'width' по умолчанию для всех дочерних элементов
text
StringТекстовое содержимое для размещения в тексте слайда
text-html
Использовать с осторожностью
StringСодержимое строки HTML для размещения в тексте слайда
text-tag
String'p'Указывает тег HTML для отображения вместо тега по умолчанию для контента текста

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Наименование
Описание
default Контент для размещения на слайде карусели
img Слот для элемента img или компонента изображения

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент
Именованный экспорт
Путь импорта
<b-carousel>BCarouselbootstrap-vue
<b-carousel-slide>BCarouselSlidebootstrap-vue

Пример:

import { BCarousel } from 'bootstrap-vue'
Vue.component('b-carousel', BCarousel)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
CarouselPluginbootstrap-vue

Пример:

import { CarouselPlugin } from 'bootstrap-vue'
Vue.use(CarouselPlugin)