48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import React, { memo, useState } from 'react'
|
|
import styles from './Carousel.module.css'
|
|
import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'
|
|
import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react'
|
|
|
|
export const Carousel = memo(({ photosData, slidePhoto }) => {
|
|
const [activeIndex, setActiveIndex] = useState(0)
|
|
|
|
const handlePrev = () => {
|
|
const newIndex = activeIndex === 0 ? photosData.length - 1 : activeIndex - 1
|
|
setActiveIndex(newIndex)
|
|
slidePhoto(newIndex)
|
|
}
|
|
|
|
const handleNext = () => {
|
|
const newIndex = activeIndex === photosData.length - 1 ? 0 : activeIndex + 1
|
|
setActiveIndex(newIndex)
|
|
slidePhoto(newIndex)
|
|
}
|
|
|
|
if (!photosData || photosData.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className={styles.carouselContainer}>
|
|
{photosData.length > 1 && (
|
|
<button onClick={handlePrev} className={styles.navButton}>
|
|
<LeftArrow />
|
|
</button>
|
|
)}
|
|
|
|
<div className={styles.imageContainer}>
|
|
<img
|
|
className={styles.image}
|
|
src={`/${photosData[activeIndex]?.photoDir}/${photosData[activeIndex]?.path}`}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
{photosData.length > 1 && (
|
|
<button onClick={handleNext} className={styles.navButton}>
|
|
<RightArrow />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
})
|