react-slick - disable animation that traverses the slides in between when sliding to a non-adjacent slide

Question

I am using React-Slick to display a carousel of 4 images. The settings I have are:

    {
        dots: true,
        infinite: true,
        autoplay,
        speed: 1000,
        autoplaySpeed: 5500,
        slidesToShow: 1,
        slidesToScroll: 1,
        easing: 'cubic'
    }

I would like to use the slickGoTo method in order to transition to any desired slide. Everything seems to be working fine except when, for example, I am on slide number 1 and click the button to go to slide number 4. In doing so, the sliding animation traverses slides 2 and 3. I would like to disable this animation so that the carousel slides from 1 to 4 without seeing the slides in between.

I noticed that the desired effect can be seen in the React Bootstrap carousel: https://react-bootstrap.github.io/components/carousel/

If you are on slide 1 and click the third dot to go to Slide 3, you do not traverse through slide 2. It slides right to slide 3.

I would really appreciate some suggestions as to how I can update react-slick to mimic this effect.

Answer 1

It's already described in the react-slick GitHub document

Method slickGoTo
   Args: index, dontAnimate
   Default: null, false
   Description: Go to slide index, if dontAnimate=true, it happens
   without animation

Here's how to do it

 render() {
var settings = {
  dots: true,
  infinite: false,
  speed: 500, // setting speed to 0 also disable the animation
  slidesToShow: 1,
  slidesToScroll: 1
};
return (
  <div>
  <div className="container">
    <Slider ref={slider => (this.slider = slider)} {...settings}>
      <div>
        <img src="http://placekitten.com/g/400/200" />
      </div>
      <div>
        <img src="https://i.pinimg.com/originals/41/df/5c/41df5c40575b0fc9294476d0062dedf3.jpg" />
      </div>
      <div>
        <img src="http://placekitten.com/g/400/200" />
      </div>
      <div>
        <img src="http://placekitten.com/g/400/200" />
      </div>
    </Slider>
  </div>
  <button onClick={()=>{
    const slideTo = 2;
    return this.slider.slickGoTo((slideTo - 1),true) // we do -1 because the array starts from 0
  }} >slickGoTo</button>
  </div>
);