ImgSlider
El componente ImgSlider permite navegar entre una lista de imágenes utilizando un sistema de pasos. Se puede controlar el paso actual y navegar entre las imágenes usando botones de paginación.
Ejemplo
Importación
Para importar el componente ImgSlider, se puede hacer desde fenextjs
import { ImgSlider } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| imgs | ImgProps[] | sí | Lista de imágenes que se muestran en el deslizador. | |
| defaultStep | number | no | 0 | Paso inicial en el deslizador de imágenes. |
| step | number | no | Paso actual en el deslizador de imágenes. | |
| setStep | (e: number) => void | no | Función para actualizar el paso actual en el deslizador. | |
| className | string | no | '' | Clase CSS para personalizar el contenedor del deslizador. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Deslizador básico
<ImgSlider imgs={imageList} />- Deslizador con paso controlado
<ImgSlider imgs={imageList} step={2} setStep={(e) => console.log(e)} />