My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out.
To address this, I have utilized the padding: '5%' option, which mostly works well. However, on the final slide, there is still some additional padding causing a white space.
I attempted to remove the padding once the last slide is reached, but this adjustment ends up making all the images slightly larger and leads to layout shifts.
Another approach I tried was setting perPage: 5.25, but this resulted in strange behavior when navigating between slides.
If anyone has suggestions or ideas to fix this issue, I would greatly appreciate it.
Below is the code snippet I am currently working with:
<Splide
ref={slideRef}
className="product-slider"
hasTrack={false}
options={{
type: 'slide',
perPage: 5,
pagination: false,
perMove: 2,
wheel: true,
padding: {right: '5%'},
}}
>
<>
<div className="splide__arrows">
<button className="splide__arrow splide__arrow--prev">
<IconChevron direction="right" />
</button>
<button className="splide__arrow splide__arrow--next">
<IconChevron direction="right" />
</button>
</div>
<SplideTrack>
{slides.map((slide) => {
return (
<SplideSlide key={slide.id}>
<Image />
</SplideSlide>
)
})}
</SplideTrack>
</>
</Splide>