React-id-swiper: Swiper instance

[Hamatek]

How do you get the swiper instance in order to manipulate it outside of the swiper component ?

I didn't see anything in the documentation which is actually an important part.

How do you deal with react rerender, let's say you have on each slide a onClick function, when you click a slide lets say #10, react rerender the swiper component to the begining of the slider #1.

I have tried componentShouldUpdate return false which prevent the rerender of the swiper, but i don't get the slide's state update that im expecting upon onClick()

[Hamatek]

@kidjp85 do you have an idea how to solve it ?

[kidjp85]

Hi @Hamatek

I think we have solution for this. If you wanna manipulate the swiper from outside of it, you can do like that

import React from 'react';
import Swiper from 'react-id-swiper';

export default class Example extends React.Component {
  constructor(props) {
    super(props)
    this.goNext = this.goNext.bind(this)
    this.goPrev = this.goPrev.bind(this)
    this.swiper = null
  }

  goNext() {
    this.swiper.slideNext()
  }

  goPrev() {
    this.swiper.slidePrev()
  }

  render() {
    const params = {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      spaceBetween: 30,
      runCallbacksOnInit: true,
      onInit: (swiper) => {
        this.swiper = swiper
      }
    }

    return(
      <div>
        <Swiper {...params} />
        <button onClick={this.goNext}>Next</button>
        <button onClick={this.goPrev}>Prev</button>
      </div>
    )
  }
}

By using runCallbacksOnInit, onInit you can easily manipulate it from outside :)

[jh3141]

Above code no longer seems to work (potentially due to a change in the upstream library).

[abdullahseba]

Same here. I just get TypeError: Cannot read property 'slideNext' of null
I tried the example in the readme too.

[mfundo]

@kidjp85 Do we have a work around for this issue? Can't seem to get the instance of Swiper. Even tried how you did it on using the ref still doesn't work.

Using ref I have gone as far as in the componentDidMount cycle do this:
this.swiper = this.swiperElement.current.swiper

I can see the swiper instance here and all its prototype methods but can't call them, get the same error as @abdullahseba.

[shiftedpixel]

@kidjp85 When you get a chance, the documentation on react-id-swiper for _"Example with manipulating swiper from outside swiper component"_ needs a tweak.

@mfundo Try the following code.

import React from 'react';
import Swiper from 'react-id-swiper';

export default class Example extends React.Component {
  constructor(props) {
    super(props)
    this.goNext = this.goNext.bind(this)
    this.goPrev = this.goPrev.bind(this)
    this.swiper = null
  }

  goNext() {
    if (this.swiper) this.swiper.slideNext()
  }

  goPrev() {
    if (this.swiper) this.swiper.slidePrev()
  }

  render() {
    const params = {
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      runCallbacksOnInit: true,
      onInit: (swiper) => {
        this.swiper = swiper
      }
    }

    return (
      <div>
        <Swiper {...params} ref={node => { if (node) this.swiper = node.swiper }}>
          <div>Slide 1</div>
          <div>Slide 2</div>
          <div>Slide 3</div>
          <div>Slide 4</div>
          <div>Slide 5</div>
        </Swiper>
        <button onClick={this.goNext}>Next</button>
        <button onClick={this.goPrev}>Prev</button>
      </div>
    )
  }
}

[mfundo]

@shiftedpixel Thanks mate...seems like the syntax of ref -> node is what I was tripping me up

[alexandprivate]

Hi there everyone I got a quick solution for this just in case anyone is having the same problem...

import React from "react";
import Swiper from "react-id-swiper";

const Slider = () => {
  const [swiper, setSwiper] = React.useState(null);

  let goNext = () => swiper.slideNext();
  let goPrev = () => swiper.slidePrev();

React.useEffect( () => {
    var mySwiper = document.querySelector(".swiper-container").swiper;
    setSwiper(mySwiper);
}, [])

 return (
    <Swiper {...params} />
    <button
        className="swiper-nav-button swiper-button-prev"
        onClick={goPrev}
    />
    <button
        className="swiper-nav-button swiper-button-next"
        onClick={goNext}
    />
  ) 
}