Handle initial render item count for carousel
This commit is contained in:
parent
cd66a9dccb
commit
d312c3c70a
1 changed files with 6 additions and 3 deletions
|
@ -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}
|
||||||
|
|
Reference in a new issue