Carousel

Компонент Carousel предназначен для создания слайд-шоу, позволяя прокручивать контент по горизонтали или вертикали с плавными анимациями. В Element Plus он обладает высокой настраиваемостью и поддерживает автопрокрутку, индикаторы и навигационные стрелки.

Подключение и базовая структура

Для использования Carousel необходимо импортировать компонент и его дочерний компонент CarouselItem:

import { ElCarousel, ElCarouselItem } from 'element-plus';

Структура базового слайдера выглядит так:

<el-carousel :interval="5000" arrow="always">
  <el-carousel-item v-for="(item, index) in images" :key="index">
    <img :src="item" alt="slide" />
  </el-carousel-item>
</el-carousel>
  • interval — интервал автопрокрутки в миллисекундах.
  • arrow — отображение стрелок навигации (always, hover, never).
  • v-for позволяет динамически создавать слайды из массива данных.

Основные свойства

Element Plus Carousel поддерживает следующие ключевые свойства:

  • height — задаёт высоту карусели. Можно использовать как строку с единицами измерения ('400px') или число (400).
  • trigger — способ активации смены слайдов при наведении (click или hover).
  • autoplay — логическое значение, включающее автопрокрутку.
  • loop — включение бесконечной прокрутки слайдов.
  • initial-index — индекс активного слайда при инициализации.
  • direction — направление слайдов: 'horizontal' или 'vertical'.

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

<el-carousel direction="vertical" :autoplay="true" height="300px">
  <el-carousel-item v-for="(item, index) in messages" :key="index">
    {{ item }}
  </el-carousel-item>
</el-carousel>

Работа с событиями

Carousel предоставляет несколько событий для интеграции с логикой приложения:

  • change — вызывается при смене активного слайда.
  • mouseenter и mouseleave — позволяют управлять поведением при наведении курсора.

Пример использования события change:

<el-carousel @change="handleChange">
  <el-carousel-item v-for="(item, i) in images" :key="i">
    <img :src="item" />
  </el-carousel-item>
</el-carousel>

<script>
export default {
  methods: {
    handleChange(index) {
      console.log('Текущий слайд:', index);
    }
  }
}
</script>

Настройка индикаторов

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

  • indicator-position — положение индикаторов ('outside', 'none' по умолчанию 'inside').
  • indicator — слот для кастомного отображения индикаторов.

Пример кастомного индикатора:

<el-carousel :indicator-position="'outside'">
  <template #indicator="{ currentIndex }">
    <div class="custom-indicator">
      {{ currentIndex + 1 }} / {{ images.length }}
    </div>
  </template>
  <el-carousel-item v-for="(img, i) in images" :key="i">
    <img :src="img" />
  </el-carousel-item>
</el-carousel>

Кастомизация переходов и анимаций

  • type — задаёт тип анимации: 'slide' (по умолчанию) или 'card'.
  • loop — бесконечная прокрутка.
  • duration — продолжительность анимации смены слайда в миллисекундах.

Пример карусели с анимацией типа card:

<el-carousel type="card" :autoplay="true" :interval="4000">
  <el-carousel-item v-for="(item, i) in cards" :key="i">
    <div class="card-content">{{ item.title }}</div>
  </el-carousel-item>
</el-carousel>

Управление через методы

Компонент Carousel предоставляет методы для программного управления слайдами:

  • setActiveItem(index) — переключение на конкретный слайд.
  • prev() и next() — переход к предыдущему или следующему слайду.

Пример использования методов через ref:

<el-carousel ref="carouselRef">
  <el-carousel-item v-for="(item, i) in images" :key="i">
    <img :src="item" />
  </el-carousel-item>
</el-carousel>

<script>
export default {
  methods: {
    goNext() {
      this.$refs.carouselRef.next();
    }
  }
}
</script>

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

  • Carousel автоматически адаптируется под ширину контейнера.
  • Можно задавать фиксированную высоту через CSS или атрибут height.
  • Слайды можно стилизовать через классы или scoped CSS, например для эффекта затухания изображений или добавления тени.
.el-carousel .el-carousel-item img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

Использование с динамическими данными

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

<el-carousel :autoplay="true">
  <el-carousel-item v-for="banner in banners" :key="banner.id">
    <div class="banner-slide">
      <h3>{{ banner.title }}</h3>
      <img :src="banner.image" />
    </div>
  </el-carousel-item>
</el-carousel>

Интеграция с другими компонентами

Carousel можно комбинировать с ElButton, ElCard и другими компонентами Element Plus, создавая интерактивные слайдеры для галерей, промо-блоков и контентных каруселей.

<el-carousel :autoplay="false">
  <el-carousel-item v-for="product in products" :key="product.id">
    <el-card>
      <img :src="product.image" />
      <h4>{{ product.name }}</h4>
      <el-button type="primary">Купить</el-button>
    </el-card>
  </el-carousel-item>
</el-carousel>

Эта гибкость делает Carousel универсальным инструментом для создания визуально привлекательных и интерактивных интерфейсов в приложениях на Vue.js с использованием Element Plus.

Оглавление