HoverGallery

Révélez plusieurs images en survolant horizontalement. Idéal pour les galeries de produits.

Import

import { HoverGallery } from 'asterui'

Exemples

Galerie basique

Survolez horizontalement pour révéler différentes images.

</>

import { HoverGallery } from 'asterui'

function App() {
  const images = [
    'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp',
    'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp',
    'https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp',
    'https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp',
  ]
  
  return (
      <HoverGallery
        images={images}
        className="max-w-60 rounded-lg"
      />
    )
}

export default App

Carte produit

Parfait pour l'affichage de produits e-commerce.

</>

Product Name

Hover over the image to see more angles

$49.99

import { HoverGallery, Card } from 'asterui'

function App() {
  const images = [
    'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp',
    'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp',
    'https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp',
    'https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp',
  ]
  
  return (
      <Card
        className="max-w-60 shadow-xl"
        title="Product Name"
        cover={<HoverGallery images={images} />}
      >
        <p>Hover over the image to see more angles</p>
        <p className="text-lg font-bold">$49.99</p>
      </Card>
    )
}

export default App

Deux images

Comparaison simple avant/après ou recto/verso.

</>

import { HoverGallery } from 'asterui'

function App() {
  return (
      <HoverGallery
        images={[
          'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp',
          'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp',
        ]}
        alts={['Front view', 'Side view']}
        className="max-w-60 rounded-lg"
      />
    )
}

export default App

API

HoverGallery

Propriété	Description	Type	Par défaut
images	Tableau d’URLs d’images (2-10 images)	string[]	-
alts	Texte alternatif pour chaque image	string[]	-
className	Classes CSS supplémentaires	string	-

Notes

• Prend en charge jusqu’à 10 images
• La première image est visible par défaut
• CSS pur - aucun JavaScript requis pour l’effet de survol
• Fonctionne mieux avec des images du même rapport d’aspect