CODEWITHSUNDEEP
reactjstypescriptswiper.js
Gaboflo
Gaboflo

Reputation: 105

Swiperjs in React : swiper.slideTo TypeScript

I am trying to use Swiperjs in my project, in a Typescript file. I want to change the active slide from another component (Tabs, from material UI, already in place). I can swipe directly in the Swiper component but I'd like to make that possible otherwise and elsewhere as well.

However I do not find the way to trigger the method slideTo (here the API) outside the component

...
<Swiper
   onSlideChange={(swiper) => setValue(swiper.realIndex)}
   ...
> 
Here my slides, other components, ...
</Swiper>

So ideally I'd rather like to have something like :

...

function handleExternalChangeSlide=(newSlideIndexToShow)=>{
   swiper.slidesTo(newSlideIndexToShow)
}

<Swiper
   onSlideChange={(swiper) => setValue(swiper.realIndex)}
   ...
> 
Here my slides, other components, ...
</Swiper>

I have seen many people doing that:

var swiper = new Swiper('.swiper-container', {
  ... options
});

function handleExternalChangeSlide=(newSlideIndexToShow)=>{
   swiper.slidesTo(newSlideIndexToShow)
}
)

But actually, Typescript claims that: Only a void function can be called with the 'new' keyword and I do not know how to handle that

Do you see any way to proceed to be able to change the active slide (without using pagination from Swiper) outside Swiper component in my .tsx file?

Upvotes: 3

Views: 12692

Answers (3)

Mehdi Faraji
Mehdi Faraji

Reputation: 3854

You can make a ref for the swiper react component like this:

const swiperRef = useRef<SwiperRef>(null);

<Swiper ref={swiperRef}

And then access swiper functions like slideNext slidePrev from it:

const slideNext = (): void => swiperRef?.current?.swiper.slideNext();

const slidePrev = (): void => swiperRef?.current?.swiper.slidePrev();

Upvotes: 0

Saif Ullah
Saif Ullah

Reputation: 3107

you can also manage navigation in swiperjs with useRef if you're using reactjs

  const swiperRef = useRef<SwiperRef>(null);
  const clickNext = () => {
    swiperRef.current?.swiper?.slideNext();
  };

  return(
   <div>
    <button onClick={clickNext}>go Next </button>

     <Swiper
      ref={swiperRef}
      slidesPerView={"auto"}
      centeredSlides={true}
      spaceBetween={30}
      className="featured-carousel"
      modules={[Navigation]}
    >
      {carouselList?.map((item, index) => {
        return (
            <SwiperSlide key={index}>
              slide {index}
            </SwiperSlide>
        );
      })}
    </Swiper>
   </div>
  )

Upvotes: 2

xom9ikk
xom9ikk

Reputation: 2299

The Swiper component takes onSwiper props a function that will return you an instance of the created Swiper. You can save this instance to a state and then call all the methods you need on it.

Here is one of the implementation options:

const [swiperInstance, setSwiperInstance] = useState<SwiperCore>();

const handleExternalChangeSlide = (newSlideIndexToShow) => {
   swiperInstance.slidesTo(newSlideIndexToShow);
}

...
<Swiper
   onSwiper={setSwiperInstance}
   onSlideChange={(swiper) => setValue(swiper.realIndex)}
   ...
> 
Here my slides, other components, ...
</Swiper>

Upvotes: 5

Related Questions