title: Swiperjs in React : swiper.slideTo TypeScript
body: <p>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.</p>
  <p>However I do not find the way to trigger the method <code>slideTo</code> (<a href="https://swiperjs.com/swiper-api#methods-and-properties" rel="nofollow noreferrer">here</a> the API) outside the component</p>
  <pre><code>...
  &lt;Swiper
     onSlideChange={(swiper) =&gt; setValue(swiper.realIndex)}
     ...
  &gt; 
  Here my slides, other components, ...
  &lt;/Swiper&gt;
  </code></pre>
  <p>So ideally I'd rather like to have something like :</p>
  <pre><code>...
  
  function handleExternalChangeSlide=(newSlideIndexToShow)=&gt;{
     swiper.slidesTo(newSlideIndexToShow)
  }
  
  &lt;Swiper
     onSlideChange={(swiper) =&gt; setValue(swiper.realIndex)}
     ...
  &gt; 
  Here my slides, other components, ...
  &lt;/Swiper&gt;
  </code></pre>
  <p>I have seen many people doing that:</p>
  <pre><code>var swiper = new Swiper('.swiper-container', {
    ... options
  });
  
  function handleExternalChangeSlide=(newSlideIndexToShow)=&gt;{
     swiper.slidesTo(newSlideIndexToShow)
  }
  )
  </code></pre>
  <p>But actually, Typescript claims that: <em>Only a void function can be called with the 'new' keyword</em> and I do not know how to handle that</p>
  <p>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?</p>