QCarousel карусели

QCarousel — это компонент библиотеки Quasar, предназначенный для создания интерактивных слайдеров и каруселей в веб-приложениях на Vue.js. Он предоставляет широкие возможности кастомизации, управление переходами между слайдами и интеграцию с другими элементами интерфейса.

Базовая структура QCarousel выглядит следующим образом:

<q-carousel
  v-model="slide"
  animated
  swipeable
  control-type="flat"
  navigation
>
  <q-carousel-slide
    v-for="(slide, index) in slides"
    :key="index"
    :name="slide.name"
    :img-src="slide.img"
    :caption="slide.caption"
  />
</q-carousel>
  • v-model — двусторонняя привязка к текущему слайду.
  • animated — включает анимацию перехода между слайдами.
  • swipeable — разрешает управление слайдами с помощью жестов на мобильных устройствах.
  • control-type — стиль отображения навигационных элементов (flat, flat-rounded, dots, slider).
  • navigation — отображение кнопок навигации вперед/назад.

QCarouselSlide и его свойства

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

  • name — уникальный идентификатор слайда, используется для программного переключения.
  • img-src — путь к изображению, которое отображается на слайде.
  • caption — текстовая подпись под изображением.
  • color — цвет фона слайда, поддерживается любая строка CSS.
  • transition-prev / transition-next — задают анимацию при переходе к предыдущему или следующему слайду.

Пример использования индивидуальной анимации:

<q-carousel-slide
  name="slide1"
  img-src="slide1.jpg"
  transition-next="jump-down"
  transition-prev="jump-up"
/>

Управление каруселью через скрипт

QCarousel поддерживает программное управление слайдами. Для этого используется v-model или методы $refs:

<q-carousel ref="carousel" v-model="currentSlide">
  <q-carousel-slide name="1" img-src="1.jpg" />
  <q-carousel-slide name="2" img-src="2.jpg" />
</q-carousel>
</q-carousel>

<script>
export default {
  data() {
    return {
      currentSlide: '1'
    }
  },
  methods: {
    nextSlide() {
      this.$refs.carousel.next()
    },
    prevSlide() {
      this.$refs.carousel.prev()
    },
    goToSlide(name) {
      this.currentSlide = name
    }
  }
}
</script>

Методы next(), prev() и goToSlide(name) позволяют переключать слайды программно, что полезно для интеграции с кнопками управления или внешними событиями.

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

Карусель позволяет выводить точечные индикаторы, слайдер или кнопки навигации. Параметр control-type задает тип индикаторов:

  • flat — плоские кнопки.
  • dots — точечные индикаторы.
  • slider — визуальный слайдер внизу карусели.

Индикаторы можно полностью кастомизировать через слот control:

<q-carousel v-model="slide">
  <template v-slot:control="{ goToSlide, slides, currentSlide }">
    <div class="custom-controls">
      <button
        v-for="s in slides"
        :key="s.name"
        :class="{ active: s.name === currentSlide }"
        @click="goToSlide(s.name)"
      >{{ s.name }}</button>
    </div>
  </template>
</q-carousel>

Автопроигрывание и таймер

Слайдеры можно настроить на автоперелистывание через autoplay и interval:

<q-carousel
  v-model="slide"
  animated
  autoplay
  interval="5000"
>
  <q-carousel-slide name="1" img-src="slide1.jpg" />
  <q-carousel-slide name="2" img-src="slide2.jpg" />
</q-carousel>
  • autoplay — включает автоматическое перелистывание.
  • interval — задает интервал в миллисекундах между сменой слайдов.

Комбинация этих параметров с жестами и анимацией позволяет создавать динамичные и интерактивные интерфейсы.

Кастомизация внешнего вида слайдов

Каждый слайд можно кастомизировать с помощью слотов:

  • default — основной контент слайда.
  • header — верхняя часть слайда, например заголовок.
  • footer — нижняя часть, например подпись или кнопки.

Пример сложного слайда с кастомным контентом:

<q-carousel-slide name="custom" color="primary">
  <template v-slot:header>
    <h3 class="text-white">Заголовок слайда</h3>
  </template>
  <template v-slot:default>
    <img src="custom.jpg" alt="Custom Slide" />
    <p class="text-white">Описание слайда с дополнительной информацией.</p>
  </template>
  <template v-slot:footer>
    <q-btn flat label="Подробнее" color="white" />
  </template>
</q-carousel-slide>

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

QCarousel легко интегрируется с QBtn, QToolbar, QLayout, QDialog для создания интерактивных галерей и презентаций. Использование слотов и методов карусели позволяет синхронизировать слайды с внешними событиями и навигацией.

События QCarousel

Ключевые события, на которые можно подписаться:

  • @input — срабатывает при смене текущего слайда.
  • @prev / @next — при переходе к предыдущему или следующему слайду.
  • @autoplay-start / @autoplay-stop — при запуске и остановке автопроигрывания.
  • @drag — при перетаскивании слайда пользователем.

Пример:

<q-carousel
  v-model="slide"
  @input="onSlideChange"
  @next="onNextSlide"
>
</q-carousel>
<script>
methods: {
  onSlideChange(newSlide) {
    console.log('Сменился слайд на', newSlide)
  },
  onNextSlide() {
    console.log('Перешли к следующему слайду')
  }
}
</script>

Оптимизация производительности

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

  • lazy-loading изображений через img-src с динамическим импортом.
  • v-for с ограничением видимых слайдов, чтобы не рендерить все сразу.
  • сжатие изображений и использование WebP для ускорения загрузки.

Итоговые возможности

QCarousel обеспечивает:

  • Плавные анимации переходов.
  • Управление жестами и клавиатурой.
  • Программное управление и кастомные слоты.
  • Разнообразие индикаторов и навигации.
  • Автопроигрывание и таймеры.
  • Легкую интеграцию с другими компонентами Quasar.

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

Оглавление