CODEWITHSUNDEEP
reactjsloopsswiper.jsmixed
Konstantin Shustorovich
Konstantin Shustorovich

Reputation: 1

Swiper.js with React in loop mode - content gets mixed up

I encountered strange bug with swiper.js when enabling loop mode. I want to display number of slides (e.g. 3) in a loop, each slide having structure as following jsx:

<div key={`${index}-${title}`}>
  <h3 className='title'> {title} </h3>
  <img src={imageHref} />
  <a href={ctaUrl}>
    <button className='cta-button'>
      {ctaText}
    </button>
  </a>
</div>

Settings are as following:

{
  cssMode: false,
  cardsAmount: items?.length,
  allowPagination: true,
  slidesPerView: 1,
  slidesPerGroup: 1
  autoHeight: true,
  loop: true,
  initialSlide: 0,
  slideToClickedSlide: true
}

So I get the slides on the screen, but urls for tags are all shifted, i.e. slide 0 has a url from slide 1, slide 1 has a link from slide 2 etc. When loop mode is turned off, everything becomes normal. I assume this is related to duplicate slides loop mode requires (I have 5 div-s for 3 slides) but I cannot understand, how can that url shift occur.

Also for a desktop I have 2 slides on a page {slidesPerView: 2}, other params are exactly the same - and the bug does not show. All urls are on correct pages.

Upvotes: 0

Views: 397

Answers (1)

Konstantin Shustorovich
Konstantin Shustorovich

Reputation: 1

Issue resolved, the cause was NOT passing a unique key prop to slides, this now works okay:

<Swiper
  navigation={{ prevEl, nextEl }}
  modules={[Navigation, Pagination]}
>
 {Children.map(children, (child) => {
   return <SwiperSlide key={uuidv4()}>{child}</SwiperSlide>;
 })}
</Swiper>

Upvotes: 0

Related Questions