Add callback for swiper zoom change

This commit is contained in:
jeffvli 2023-05-17 17:47:05 -07:00
parent 5637327e8a
commit 71b9cace53

View file

@ -196,6 +196,19 @@ export const SwiperGridCarousel = ({
[slidesPerView], [slidesPerView],
); );
const handleOnZoomChange = useCallback(
(e: SwiperCore) => {
const { slides, isEnd, isBeginning } = e;
if (isEnd || isBeginning) return;
setPagination({
hasNextPage: slidesPerView < slides.length,
hasPreviousPage: slidesPerView < slides.length,
});
},
[slidesPerView],
);
const handleOnReachEnd = useCallback( const handleOnReachEnd = useCallback(
(e: SwiperCore) => { (e: SwiperCore) => {
const { slides } = e; const { slides } = e;
@ -246,10 +259,6 @@ export const SwiperGridCarousel = ({
)} )}
<Swiper <Swiper
ref={swiperRef} ref={swiperRef}
grid={{
fill: 'column',
rows: 2,
}}
modules={[Virtual]} modules={[Virtual]}
slidesPerView={swiperProps?.slidesPerView || slidesPerView || 5} slidesPerView={swiperProps?.slidesPerView || slidesPerView || 5}
spaceBetween={20} spaceBetween={20}
@ -260,6 +269,7 @@ export const SwiperGridCarousel = ({
onReachBeginning={handleOnReachBeginning} onReachBeginning={handleOnReachBeginning}
onReachEnd={handleOnReachEnd} onReachEnd={handleOnReachEnd}
onSlideChange={handleOnSlideChange} onSlideChange={handleOnSlideChange}
onZoomChange={handleOnZoomChange}
{...swiperProps} {...swiperProps}
> >
{slides.map((slideContent, index) => { {slides.map((slideContent, index) => {