kidjp85 / react-id-swiper

A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build
https://react-id-swiper.ashernguyen.site/
MIT License
1.49k stars 154 forks source link

Effect doesn't change after first render #187

Closed MouadBenjrinija closed 6 years ago

MouadBenjrinija commented 6 years ago

Hi there, thank you very much for the library. I am having an issue that i need your help on: I want to change the animation effect of the swiper depending on the user's choice (app settings), the swiper only takes the first effect that i pass (the default one in my app's settings) after the first render, when i change the effect it triggers the render function again with the new value of the effect param on the swiper, but still i get the animation that i had before. swiper params (created in the render function of the component wrapping the swiper).

      slidesPerView: 1,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      spaceBetween: 150,
      effect: this.settingsStore.slideAnimation //fade, coverflow, flip. slide
    };
return (
      //.... code
            <Swiper
              {...mySwiper}
              ref={node => {
                if (node) {
                  this.swiper = node.swiper;
                  node.swiper.on("slideChange", () => {
                    this.didSlide(node.swiper.activeIndex);
                  });
                }
              }}
            >
              {renderedItems}
            </Swiper>
      //.... code
kidjp85 commented 6 years ago

Hi @mbenjrinija , I think you should use rebuildOnUpdate: true to force swiper to rebuild each time the props change.