Add callback for swiper zoom change
This commit is contained in:
parent
5637327e8a
commit
71b9cace53
1 changed files with 14 additions and 4 deletions
|
@ -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) => {
|
||||||
|
|
Reference in a new issue