I'm using react-id-swiper module in react to load a slider, I have set an onClick event handler on some buttons with different id attributes, each time the user clicks a button an API with a different id is called, the state is updated and therefore the ImageSlider ponent is loaded and some images are shown in the slider on a modal. The images are shown as expected but the problem is that whenever a new button is clicked new images are loaded but the pagination buttons don't get reset and the number of pagination buttons is fixed to the number of first API call images! So I'm guessing the swiper doesn't get reset.I'm working on how I can reset or destroy swiper before swiper is rendered in the ponent but I haven't gotten any luck.

So far I've checked mentioned pages but wasn't able to find a solution! react-id-swiper and react-id-swiper npm

This is the ImageSlider ponent:

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;

A simple straight forward answer is appreciated, Thanks.

I'm using react-id-swiper module in react to load a slider, I have set an onClick event handler on some buttons with different id attributes, each time the user clicks a button an API with a different id is called, the state is updated and therefore the ImageSlider ponent is loaded and some images are shown in the slider on a modal. The images are shown as expected but the problem is that whenever a new button is clicked new images are loaded but the pagination buttons don't get reset and the number of pagination buttons is fixed to the number of first API call images! So I'm guessing the swiper doesn't get reset.I'm working on how I can reset or destroy swiper before swiper is rendered in the ponent but I haven't gotten any luck.

So far I've checked mentioned pages but wasn't able to find a solution! react-id-swiper and react-id-swiper npm

This is the ImageSlider ponent:

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;

A simple straight forward answer is appreciated, Thanks.

• javascript
• reactjs
• swiper.js

3 Answers 3

I found the solution by adding rebuildOnUpdate: true prop to the params passing to the Swiper. A plete list of props can be found here react-id-swiper original props .

I have a similar problem problem some time ago, check out if my solution works.

When the slides props are updated you need to update swiper manually through the update method. API Documentation

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
  ponentDidUpdate(prevProps) {
    // when slides changes
    if(this.swiper && prevProps.sliderImages !== this.props.sliderImages) {
      // update swiper internally
      this.swiper.update();
      // go to first slide
      this.swiper.slideTo(0, 0);
    }
  }

    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;

My Solution for Swiper update, i am using redux to load the items. shouldSwiperUpdate do the job for me.

<Swiper {...params} shouldSwiperUpdate>
{books === null ? (
<List />
) : (
books.map(book => (
<div key={book._id}>
<CardItem book={book} />
              </div>
            ))
          )}
        </Swiper>`

`