I am trying to make a multi column carousel in React (4 columns) that works responsively (it still scrolls by 4 when on tablet or desktop). When you click the arrows, I want it to slide by 4 so that the next 4 items are shown. At the moment, my clickCount is not updating in time for me to set the scrollTo to the correct thing. Also, I've been having issues when resizing my screen (sometimes it will skip an item or go too far). Btw, each item has a width of 25%.
This is what I have so far below -
const [clickCount, setClickCount] = useState(0)
const scrollSlide = (direction: 'next' | 'prev') => {
const width = mainWrap.current?.clientWidth
if (direction === 'next') {
setClickCount(clickCount + 1)
scrollTo = width * clickCount
} else {
setClickCount(prevState => prevState - 1)
scrollTo = scrollTo - width
}
containerRef.current?.scrollTo({
behaviour: 'smooth',
left: scrollTo
})
}
return (
<div ref={mainWrap}>
<button onClick={() => scrollSllides('prev')}>Prev</button>
<button onClick={() => scrollSllides('next')}>Next</button>
<div ref={containerRef}>
{items?.map((item, index) => (
<ItemComponent
key={index}
title={item.title}
image={item.image}
/>
))}
</div>
</div>
)
I just defined this slider, based on the code which you provide: https://codesandbox.io/s/epic-feynman-jvt1q?file=/src/styles.css
const Slider = ({ items }) => {
const [clickCount, setClickCount] = React.useState(0);
const mainWrap = React.useRef();
const containerRef = React.useRef();
const scrollSllides = (direction) => {
const width = mainWrap.current?.clientWidth;
let scrollTo;
const diff = direction === "next" ? 1 : -1;
const newValue = (clickCount + diff) % (items.length / 4);
setClickCount(newValue);
scrollTo = width * newValue;
containerRef.current?.scrollTo({
behavior: "smooth",
left: scrollTo
});
};
return (
<div ref={mainWrap}>
<button onClick={() => scrollSllides("prev")}>Prev</button>
<button onClick={() => scrollSllides("next")}>Next</button>
<div className="Slider" ref={containerRef}>
{items?.map((item, index) => (
<ItemComponent key={index} title={item.title} image={item.image} />
))}
</div>
</div>
);
};
With next CSS:
.Slider {
width: 100%;
height: 100px;
overflow: scroll;
white-space: nowrap;
}
.ItemComponent {
display: inline-block;
width: 25%;
height: 100px;
}