Карусели v-carousel

Компонент v-carousel в библиотеке Vuetify предназначен для создания интерактивных слайд-шоу и каруселей изображений или других элементов. Он обеспечивает простую интеграцию с Vue.js, поддерживает адаптивность, автоматическую прокрутку и настраиваемые элементы управления.

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>

В этом примере v-carousel-item отображает каждый слайд, а массив items содержит объекты с полями src для изображений.

  • cycle – включает или отключает автоматическую смену слайдов.
  • interval – задаёт интервал между сменой слайдов в миллисекундах.
  • hide-delimiters – скрывает индикаторы текущего слайда.
  • show-arrows – отображает стрелки навигации.
  • vertical – превращает карусель в вертикальную прокрутку.
  • reverse – инвертирует направление прокрутки.

Пример настройки автоматической прокрутки каждые 3 секунды с отображением стрелок:

<v-carousel
  cycle
  interval="3000"
  show-arrows
>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>

Каждый слайд создаётся с помощью v-carousel-item. Этот компонент поддерживает:

  • src – путь к изображению.
  • reverse-transition и transition – кастомизация анимации смены слайдов.
  • Внутреннее содержимое через слоты, что позволяет использовать текст, кнопки и другие Vue-компоненты внутри слайда.

Пример с текстовым слотом:

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
  >
    <v-sheet class="fill-height" color="primary">
      <v-row class="fill-height" align="center" justify="center">
        <v-col class="text-center">
          <h1 class="white--text">{{ item.title }}</h1>
          <p class="white--text">{{ item.description }}</p>
        </v-col>
      </v-row>
    </v-sheet>
  </v-carousel-item>
</v-carousel>

Настройка переходов и анимаций

Vuetify предоставляет возможность задавать переходы с помощью свойств transition и reverse-transition. Значения можно брать из встроенных анимаций Vuetify, таких как fade-transition, slide-x-transition, slide-y-transition:

<v-carousel
  transition="slide-x-transition"
  reverse-transition="slide-x-reverse-transition"
>

Управление каруселью программно

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

<v-carousel v-model="currentSlide">
  <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>

<v-btn @click="currentSlide = (currentSlide + 1) % items.length">Следующий</v-btn>

Индикаторы и стрелки навигации

Индикаторы (delimiters) автоматически отображаются снизу, но их можно настроить или скрыть:

  • hide-delimiters – скрывает индикаторы.
  • delimiter-icon – позволяет изменить иконку индикатора.

Стрелки управления можно кастомизировать с помощью слотов:

<v-carousel>
  <template #prev>
    <v-btn icon><v-icon>mdi-chevron-left</v-icon></v-btn>
  </template>
  <template #next>
    <v-btn icon><v-icon>mdi-chevron-right</v-icon></v-btn>
  </template>
</v-carousel>

Адаптивность и стилизация

Карусель Vuetify полностью адаптивна. Для управления размерами можно использовать CSS-классы height, max-height, min-height, либо встроенные классы Vuetify (fill-height, ma-0, pa-0).

Пример задания фиксированной высоты с адаптивной шириной:

<v-carousel height="400">

Стилизация слайдов производится через v-sheet или прямой CSS-стиль для v-carousel-item.

  • @input – срабатывает при изменении текущего слайда.
  • @change – срабатывает после завершения анимации перехода.
  • @mouseenter / @mouseleave – можно приостановить или возобновить автоматическую прокрутку.

Пример остановки карусели при наведении:

<v-carousel
  v-model="currentSlide"
  cycle
  @mouseenter="cycle = false"
  @mouseleave="cycle = true"
>

Динамическое добавление слайдов

Слайды можно создавать динамически из массива объектов. Любое обновление массива автоматически обновляет карусель. Можно использовать v-for с любыми данными: изображения, тексты, компоненты.

<v-carousel>
  <v-carousel-item
    v-for="item in slides"
    :key="item.id"
  >
    <component :is="item.component" v-bind="item.props" />
  </v-carousel-item>
</v-carousel>

Использование с Vuetify Grid

Слайды можно комбинировать с сеткой Vuetify. Это удобно для создания сложных макетов с текстом, кнопками и изображениями в одном слайде:

<v-carousel>
  <v-carousel-item>
    <v-container>
      <v-row>
        <v-col cols="6">
          <v-img src="image.jpg"></v-img>
        </v-col>
        <v-col cols="6">
          <h2>Заголовок</h2>
          <p>Описание слайда с текстом и кнопкой</p>
          <v-btn color="secondary">Подробнее</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-carousel-item>
</v-carousel>

Советы по производительности

  • Для большого количества слайдов рекомендуется использовать lazy-loading изображений.
  • Минимизировать сложные компоненты внутри слайдов для плавной анимации.
  • Ограничить количество одновременно видимых слайдов при использовании кастомных переходов.
Оглавление