Handle initial render item count for carousel

This commit is contained in:
jeffvli 2023-06-02 01:21:52 -07:00
parent cd66a9dccb
commit d312c3c70a

View file

@ -221,11 +221,13 @@ export const SwiperGridCarousel = ({
}); });
}, []); }, []);
const handleOnResize = throttle((e: SwiperCore) => { const handleOnResize = useCallback((e: SwiperCore) => {
const { width } = e; const { width } = e;
const slidesPerView = getSlidesPerView(width); const slidesPerView = getSlidesPerView(width);
e.params.slidesPerView = slidesPerView; e.params.slidesPerView = slidesPerView;
}, 200); }, []);
const throttledOnResize = throttle(handleOnResize, 200);
return ( return (
<CarouselContainer <CarouselContainer
@ -250,9 +252,10 @@ export const SwiperGridCarousel = ({
onBeforeInit={(swiper) => { onBeforeInit={(swiper) => {
swiperRef.current = swiper; swiperRef.current = swiper;
}} }}
onBeforeResize={handleOnResize}
onReachBeginning={handleOnReachBeginning} onReachBeginning={handleOnReachBeginning}
onReachEnd={handleOnReachEnd} onReachEnd={handleOnReachEnd}
onResize={handleOnResize} onResize={throttledOnResize}
onSlideChange={handleOnSlideChange} onSlideChange={handleOnSlideChange}
onZoomChange={handleOnZoomChange} onZoomChange={handleOnZoomChange}
{...swiperProps} {...swiperProps}