44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
// src/components/ImageCarousel.js
|
|
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import styles from './ImageCarousel.module.css';
|
|
|
|
export default function ImageCarousel({ images }) {
|
|
const [current, setCurrent] = React.useState(0);
|
|
|
|
if (!images || images.length === 0) return null;
|
|
|
|
return (
|
|
<div className={styles.carousel}>
|
|
<div className={styles.viewport}>
|
|
{images.map((img, idx) => (
|
|
<div
|
|
key={idx}
|
|
className={clsx(styles.slide, { [styles.active]: idx === current })}
|
|
>
|
|
<img src={img.src} alt={img.alt || `Slide ${idx + 1}`} />
|
|
{img.caption && <div className={styles.caption}>{img.caption}</div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.thumbnails}>
|
|
{images.map((img, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setCurrent(idx)}
|
|
className={clsx(styles.thumbnailWrapper, {
|
|
[styles.activeThumbnail]: idx === current,
|
|
})}
|
|
>
|
|
<img
|
|
src={img.src}
|
|
alt={`Thumbnail ${idx + 1}`}
|
|
className={styles.thumbnail}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|