Carousel

Carrousel de contenu rotatif avec contrôles de navigation, indicateurs et support de lecture automatique.

Import

import { Carousel } from 'asterui'

Exemples

Carrousel de base

Carrousel simple avec contrôles de navigation et indicateurs.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/1/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/2/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/3/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Lecture automatique

Carrousel avec avancement automatique des diapositives. Se met en pause au survol.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel autoplay autoplaySpeed={2000} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/1/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/2/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/3/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Effet de fondu

Carrousel avec transition en fondu au lieu du défilement.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel effect="fade" autoplay autoplaySpeed={3000} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/10/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/11/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/12/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Carrousel vertical

Carrousel avec orientation verticale.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel vertical className="h-48 w-full max-w-md">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/4/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/5/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/6/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Sans flèches

Carrousel avec flèches masquées, navigation par points uniquement.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel arrows={false} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/7/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/8/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/9/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Position des points

Positionner les points indicateurs à différents emplacements.

Top Dots

Start Dots

import { Carousel, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Carousel dotPlacement="top" className="w-full max-w-md h-32">
          <Carousel.Item>
            <div className="bg-info text-info-content h-full flex items-center justify-center">Top Dots</div>
          </Carousel.Item>
          <Carousel.Item>
            <div className="bg-success text-success-content h-full flex items-center justify-center">Slide 2</div>
          </Carousel.Item>
        </Carousel>
        <Carousel dotPlacement="start" arrows={false} className="w-full max-w-md h-32">
          <Carousel.Item>
            <div className="bg-warning text-warning-content h-full flex items-center justify-center">Start Dots</div>
          </Carousel.Item>
          <Carousel.Item>
            <div className="bg-error text-error-content h-full flex items-center justify-center">Slide 2</div>
          </Carousel.Item>
        </Carousel>
      </Space>
    )
}

export default App

Contenu personnalisé

Carrousel avec contenu de diapositive personnalisé comme des cartes.

Feature 1

Discover amazing features

import { Carousel, Card, Button } from 'asterui'

function App() {
  return (
      <Carousel className="w-full max-w-md">
        <Carousel.Item>
          <Card title="Feature 1" className="bg-base-200 h-full">
            <p>Discover amazing features</p>
            <Button color="primary" size="sm">Learn More</Button>
          </Card>
        </Carousel.Item>
        <Carousel.Item>
          <Card title="Feature 2" className="bg-base-200 h-full">
            <p>Powerful and flexible</p>
            <Button color="secondary" size="sm">Explore</Button>
          </Card>
        </Carousel.Item>
      </Carousel>
    )
}

export default App

API

`Carousel`

Propriété	Description	Type	Défaut
`children`	Diapositives du carrousel (composants Carousel.Item)	`ReactNode`	-
`activeIndex`	Index de la diapositive actuelle (mode contrôlé)	`number`	-
`defaultActiveIndex`	Index de diapositive par défaut (mode non contrôlé)	`number`	`0`
`autoplay`	Avancement automatique des diapositives	`boolean`	`false`
`autoplaySpeed`	Intervalle de lecture automatique en millisecondes	`number`	`3000`
`speed`	Durée de l’animation en millisecondes	`number`	`500`
`arrows`	Afficher les flèches de navigation précédent/suivant	`boolean`	`true`
`dots`	Afficher les points indicateurs de diapositive	`boolean \| { className?: string }`	`true`
`dotPlacement`	Position des points indicateurs	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`
`effect`	Effet de transition	`'scrollx' \| 'fade'`	`'scrollx'`
`infinite`	Activer la boucle infinie	`boolean`	`true`
`pauseOnHover`	Mettre en pause la lecture automatique au survol	`boolean`	`true`
`vertical`	Orientation verticale du carrousel	`boolean`	`false`
`beforeChange`	Callback avant le changement de diapositive	`(current: number, next: number) => void`	-
`afterChange`	Callback après le changement de diapositive	`(current: number) => void`	-
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests ; les éléments enfants utilisent ceci comme préfixe	`string`	-

`Carousel.Item`

Propriété	Description	Type	Défaut
`children`	Contenu de la diapositive	`ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests	`string`	-

Méthodes `CarouselRef`

Propriété	Description	Type	Défaut
`goTo`	Naviguer vers une diapositive spécifique	`(index: number, animate?: boolean) => void`	-
`next`	Aller à la diapositive suivante	`() => void`	-
`prev`	Aller à la diapositive précédente	`() => void`	-

Conseils d’utilisation

Utilisez Carousel.Item pour envelopper chaque diapositive
Définissez une hauteur fixe sur le Carousel pour une mise en page cohérente
La lecture automatique se met en pause au survol pour une meilleure expérience utilisateur
Utilisez les touches fléchées pour naviguer lorsque le carrousel a le focus
Accédez aux méthodes goTo, next, prev via ref

Carousel

Import

Exemples

Carrousel de base

Lecture automatique

Effet de fondu

Carrousel vertical

Sans flèches

Position des points

Contenu personnalisé

Feature 1

API

Carousel

Carousel.Item

Méthodes CarouselRef

Conseils d’utilisation

`Carousel`

`Carousel.Item`

Méthodes `CarouselRef`