Mapped Data in Swiper not rendering correctly.

react-id-swiper: ^3.0.0 swiper: ^5.3.6

When mapping data to the swiper component, as I have done in previous versions, the swiper renders all items ignoring the slidesPerView, centeredSlides parameters set. Here are my params:

const params = {
    containerClass: 'testimony-carousel',
    loop: true,
    lazy: true,
    rebuildOnUpdate: true,
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
      clickable: true
    },
    centeredSlides: true,
    slidesPerView: 1
  }

inside the component it is set like this:

<Swiper {...params}>
      {
        data.testimonies.map((data, i) => (
          <Testimony key={i} data={data} />
        ))
      }
 </Swiper>

The styling has been imported as well, still just rendering all slides inside the swiper container

[elias-garcia]

I had the same problem @trevans24. Having a look at the Swiper Docs, I’ve figured out that they are wrapping each slide in a div with a class named swiper-slide. So this code works as expected:

<Swiper {...params}>
  {edges.map(({ node: review }, index) => (
    <div className="swiper-slide" key={index}>
      <Review
        authorName={review.author.name}
        authorImage={review.author.image}
        rating={review.rating}
        comments={review.comments}
      />
    </div>
  ))}
</Swiper>

[Amealky]

Same problem here