Карусель

Карусель - это слайд-шоу для циклического просмотра серии контента, созданного с помощью преобразований 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">
      Слайд #: <br>
      Слайдинг: 
    </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. Смотрите раздел с сокращенным движением в нашей документации по специальным возможностям для получения дополнительных сведений.

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

`<b-carousel>`

Смотреть источник

<b-carousel> Свойства
<b-carousel> v-model
<b-carousel> Слоты
<b-carousel> События

Свойства

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`background`	`String`		Установите цвет CSS для фона карусели
`controls`	`Boolean`	`false`	Включить предыдущий и следующий элементы управления
`fade`	`Boolean`	`false`	Если установлено, изменяет анимацию слайда на перекрестное затухание вместо эффекта скольжения
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`img-height`	`Number` или `String`		Установите атрибут изображения 'height' для всех дочерних элементов b-tab
`img-width`	`Number` или `String`		Установите атрибут изображения 'width' для всех дочерних элементов b-tab
`indicators`	`Boolean`	`false`	Включите кнопки индикатора для перехода к определенным слайдам
`interval`	`Number`	`5000`	Установите время задержки (в миллисекундах) между слайдами
`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`	`Boolean`	`false`	Если установлено, отключает анимацию при переходе между слайдами
`no-hover-pause`	`Boolean`	`false`	Если задано, отключает приостановку слайд-шоу при наведении курсора на текущий слайд
`no-touch`	`Boolean`	`false`	Отключить управление слайдами с помощью сенсорных движений
`no-wrap` v2.0.0+	`Boolean`	`false`	Не перезапускайте слайд-шоу, когда будет достигнут конец
`value` v-model	`Number`	`0`	Текущий активный слайд (с нулевым индексом)

`v-model`

Свойство	Событие
`value`	`input`

Слоты

Наименование	Описание
`default`	Контент (слайды) для размещения в карусели

События

Событие	Аргументы	Описание
`sliding-end`	`slide` - Номер слайда, на который был сдвинут	Генерируется при завершении перехода к новому слайду
`sliding-start`	`slide` - Номер слайда, на который перемещается	Генерируется, когда начался переход к новому слайду

`<b-carousel-slide>`

Смотреть источник

<b-carousel-slide> Свойства
<b-carousel-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`	`Boolean`	`false`	Если установлено, будет отображаться пустое изображение вместо 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>`	`BCarousel`	`bootstrap-vue`
`<b-carousel-slide>`	`BCarouselSlide`	`bootstrap-vue`

Пример:

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

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

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

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

Пример:

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

Размеры

Интервал

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

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

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

Свойства

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

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

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

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

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

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

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

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

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

Доступность

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

Свойства

v-model

Слоты

События

Свойства

Слоты

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

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

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

`v-model`