pagination render empty tag

[seyyed-sina]

using

swiper: ^6.1.1,
react-id-swiper:  ^4.0.0

get nothing on pagination tag. It means it renders nothing in .pagination. Also, the fade effect does nothing.

here is my try:

// SlideShow.js
<Carousel
      options={{
        slidesPerView: 'auto',
        pagination: {
           el: '.swiper-pagination',
           clickable: true
       }
}}>
   {listCard.map((card) => {
    return ( 
      <div key={card.id} className={styles.cardWrapper}>
          <EventCard card={card} />
      </div>
    );
})}
</Carousel>

// Carousel.js
export const Carousel = ({ children, options }) => {
    const defaultOption = {
                effect: 'fade',
        shouldSwiperUpdate: true,
        rebuildOnUpdate: true,
        grabCursor: true,
        spaceBetween: 10
    };
    const sliderOption = Object.assign(defaultOption, options);

    return <Swiper {...sliderOption}>{children}</Swiper>;
};

[jackylo-hc]

seems Swiper > 6.x.x already support React Component please check in here: https://swiperjs.com/react/ its work fine with the pagination

[seyyed-sina]

thanks, @hclojacky, at last, I had to migrate to swiper/react

[Quirksmode]

Same issue for me, pagination no longer works since updating to react-id-swiper: 4.0.0

[GaddMaster]

Pagination has gone for me, poof ???

[Quirksmode]

I managed to fix the pagination by downgrading Swiper to version "5.4.5" as per this working example

https://codesandbox.io/s/pagination-dynamic-bullets-example-forked-rqu2q?file=/src/App.tsx

[GaddMaster]

@Quirksmode Did the job for me too !, until now that div was empty. I have a feeling ill move to swiper asap anyways but good patch for now