/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 轮播图组件
|
*/
|
import React from 'react';
|
|
interface CarouselImage {
|
src: string;
|
alt: string;
|
}
|
|
interface CarouselProps {
|
images: CarouselImage[];
|
currentSlide: number;
|
onSlideChange: (index: number) => void;
|
}
|
|
const Carousel: React.FC<CarouselProps> = ({ images, currentSlide, onSlideChange }) => {
|
return (
|
<div className="carousel-container">
|
<div
|
className="carousel-wrapper"
|
style={{ transform: `translateX(-${currentSlide * 100}%)` }}
|
>
|
{images.map((image, index) => (
|
<div key={index} className="carousel-slide">
|
<img src={image.src} alt={image.alt} />
|
</div>
|
))}
|
</div>
|
<div className="carousel-dots">
|
{images.map((_, index) => (
|
<span
|
key={index}
|
className={`dot ${index === currentSlide ? 'active' : ''}`}
|
onClick={() => onSlideChange(index)}
|
/>
|
))}
|
</div>
|
</div>
|
);
|
};
|
|
export default Carousel;
|
