66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import React, { Children, useEffect, useRef, useState } from 'react';
|
|
import classes from './Carousel.module.css';
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function Carousel({ children }: Props): JSX.Element {
|
|
const [activeItem, setActiveItem] = useState(0);
|
|
const content = useRef<HTMLDivElement>(null);
|
|
const maxItems = Children.count(children) - 1;
|
|
|
|
useEffect(() => {
|
|
if (content.current == null) return;
|
|
|
|
const offset = content.current.clientWidth * activeItem;
|
|
// const offset = 100 * activeItem;
|
|
//
|
|
console.log(offset, activeItem, content.current.clientWidth);
|
|
|
|
content.current.style.transform = `translate3d(-${offset}px, 0px, 0px)`;
|
|
}, [activeItem]);
|
|
|
|
const offsetActiveItem = (offset: number): void => {
|
|
setActiveItem((prev) => {
|
|
const newActiveItem = prev + offset;
|
|
|
|
// Wrap on end in both sides
|
|
if (newActiveItem < 0) {
|
|
return maxItems;
|
|
}
|
|
|
|
if (newActiveItem > maxItems) {
|
|
return 0;
|
|
}
|
|
|
|
return newActiveItem;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={classes.carousel}>
|
|
<button
|
|
className={classes.btnPrev}
|
|
onClick={() => {
|
|
offsetActiveItem(-1);
|
|
}}
|
|
>
|
|
Prev
|
|
</button>
|
|
<div className={classes.container}>
|
|
<div ref={content} className={classes.content}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
<button
|
|
className={classes.btnNext}
|
|
onClick={() => {
|
|
offsetActiveItem(1);
|
|
}}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|