Carousel

Компонент Carousel из библиотеки Ant Design представляет собой слайдер, предназначенный для циклического отображения контента. Он широко используется для создания каруселей изображений, карточек, текстовых блоков и любых других элементов интерфейса. Основные возможности компонента включают автоматическую прокрутку, навигационные стрелки, точки-индикаторы и поддержку адаптивного дизайна.

import { Carousel } from 'antd';

const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};

<Carousel autoplay>
  <div>
    <h3 style={contentStyle}>1</h3>
  </div>
  <div>
    <h3 style={contentStyle}>2</h3>
  </div>
  <div>
    <h3 style={contentStyle}>3</h3>
  </div>
  <div>
    <h3 style={contentStyle}>4</h3>
  </div>
</Carousel>

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

1. autoplay

  • Тип: boolean
  • Включает автоматическую прокрутку слайдов.

2. dots

  • Тип: boolean | object
  • Управляет отображением индикаторов. При значении false точки не отображаются. Можно передать объект с настройками стиля:
<Carousel dots={{ className: 'custom-dots' }} />

3. effect

  • Тип: 'scrollx' | 'fade'
  • Определяет эффект перехода между слайдами. По умолчанию 'scrollx'. Эффект 'fade' создаёт плавное затухание слайдов.

4. easing

  • Тип: string
  • Позволяет задать CSS-функцию анимации, например: 'linear', 'ease-in-out'.

5. beforeChange / afterChange

  • Тип: (from: number, to: number) => void
  • Колбэки, вызываемые перед и после смены слайда. Позволяют выполнять действия, синхронизировать состояние или запускать анимацию.

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

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

import { useRef } from 'react';
import { Carousel, Button } from 'antd';

const carouselRef = useRef(null);

<Carousel ref={carouselRef}>
  <div><h3>Slide 1</h3></div>
  <div><h3>Slide 2</h3></div>
  <div><h3>Slide 3</h3></div>
</Carousel>

<Button onCl ick={() => carouselRef.current.next()}>Next</Button>
<Button onCl ick={() => carouselRef.current.prev()}>Previous</Button>
<Button onCl ick={() => carouselRef.current.goTo(1)}>Go to Slide 2</Button>

Методы:

  • next() – переход к следующему слайду.
  • prev() – переход к предыдущему слайду.
  • goTo(slideNumber, dontAnimate) – переход к указанному слайду; dontAnimate отключает анимацию.

Кастомизация отображения точек

Для стилизации точек можно использовать объект dots с функцией render, которая позволяет полностью контролировать отображение индикаторов:

<Carousel
  dots={{
    className: 'custom-dots',
    render: (current, total) => <span>{current}/{total}</span>,
  }}
/>

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

Адаптивность и вертикальная карусель

По умолчанию карусель горизонтальная, но с помощью свойства vertical можно переключить направление:

<Carousel vertical autoplay>
  <div><h3>Slide 1</h3></div>
  <div><h3>Slide 2</h3></div>
</Carousel>

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

Lazy Load и оптимизация

Для увеличения производительности и уменьшения нагрузки на DOM можно включить ленивую загрузку изображений внутри слайдов. Ant Design Carousel сам по себе не предоставляет встроенный lazy load, но в сочетании с компонентами <img loading="lazy" /> или библиотеками вроде react-lazyload это реализуется легко:

<div>
  <img src="image1.jpg" loading="lazy" alt="Slide 1" />
</div>

Анимация и пользовательские эффекты

Использование CSS-анимаций через класс slick-slide позволяет создавать плавные эффекты при смене слайдов. Также можно комбинировать afterChange с библиотекой анимаций, например framer-motion, для сложных переходов.

Интеграция с данными и динамическое создание слайдов

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

const slides = [
  { id: 1, title: 'Первый' },
  { id: 2, title: 'Второй' },
  { id: 3, title: 'Третий' },
];

<Carousel autoplay>
  {slides.map(slide => (
    <div key={slide.id}>
      <h3>{slide.title}</h3>
    </div>
  ))}
</Carousel>

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

Сочетание с другими компонентами Ant Design

Компонент Carousel хорошо сочетается с:

  • Card – для слайдов с карточками продукта или контента.
  • Button – для кастомной навигации.
  • Tooltip / Popover – для подсказок при наведении на слайд.

Пример комбинации с карточками:

import { Card, Carousel } from 'antd';

<Carousel autoplay>
  <div>
    <Card title="Продукт 1">Описание 1</Card>
  </div>
  <div>
    <Card title="Продукт 2">Описание 2</Card>
  </div>
</Carousel>

Эти возможности делают Carousel гибким инструментом для создания визуально привлекательных и интерактивных слайдеров в приложениях на React с использованием Ant Design.

Оглавление