[Solved] React :: Dynamic Swiper in Loop

Questions
1

I’m trying to create a Swiper with dynamic content in jsx using map. It does render the sliders but not working.

    <Swiper className="homeSwiper" navigation params={{ speed: 1000, slidesPerView: 1, spaceBetween: 20, autoplay: { delay: 300, disableOnInteraction: false } }}>
      {
        promotions.map((item, index) => {
          return (
            <SwiperSlide key={index}>
              <img className="width-100" src={item.promotion_src} />
            </SwiperSlide>
          )
        })
      }
    </Swiper>
2

I’ve solved this by creating another component as below.

class SwipeSliders extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sliders: props.sliders,
    };
  }
  render() {
    const { sliders } = this.state;
    let slides = [];
    sliders.forEach((item, idx) => {
      slides.push(
        <SwiperSlide key={idx}>
          <img className="width-100" src={item.promotion_src} />
        </SwiperSlide>
      );
    });
    return (
      <Swiper className="homeSwiper" navigation pagination params={{ speed: 500, slidesPerView: 1, autoplay: { delay: 5000, disableOnInteraction: false } }}>
        {slides}
      </Swiper>
    )
  }
}
1 Like