Hide external controls when not required

[tiggeymone]

Hello, first of all thank you for this wonderful slider.

I'm using Swiper React, and I'm very satisfied with it. Because of the layout of my page, I have implemented the control buttons outside of the slider, so I can control the slider using a ref:

const goPrev = () => {
    if (ref.current !== null && ref.current.swiper !== null) {
      ref.current.swiper.slidePrev()
    }
  }
  const goNext = () => {
    if (ref.current !== null && ref.current.swiper !== null) {
      ref.current.swiper.slideNext()
    }
  }

The controls are two simple divs:

<div className="slider-controls">
  <div onClick={goPrev} className={`prev-slide`}>
      <NextArrow style={{ transform: "rotate(180deg)" }} />
  </div>
  <div onClick={goNext} className={`next-slide`}>
      <NextArrow />
   </div>
 </div>

Everything is working fine. However, I need to hide the slider-controls div if the number of slides is insufficient. I think I have to check a double condition like:

swiper.isBeginning && swiper.isEnd

but I dont know how to implement it in a React way. So the question is: is there any elegant or hacky way as well to hide the external control buttons if the number of slides is insufficient?

Any help will be really appreciated!

Thank you in advance

[nolimits4web]

You can listen for Swiper's progress (add via onProgress prop) event, this is place where isBeginning and isEnd set. In this event handler you can update the state (to show/hide nav buttons).

[tiggeymone]

Thank you, it works like a charm!!