CODEWITHSUNDEEP
reactjsslick.jsreact-slick
Eloi
Eloi

Reputation: 108

Change the current slide with react-slick

I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider to change.

Do you know if is it possible to do this properly with this library?

I found a solution on the react-slick github (https://github.com/akiran/react-slick/issues/738), which consists of creating a ref to the slideshow and setting the focus via this.slider.innerSlider.list.focus(). However, this does not work very well, because the element I want is not at the very top of the slider. For example, if I set the focus on the second to last slide, the first element of my list is not accessible any more via the arrows.

Upvotes: 2

Views: 16328

Answers (2)

Ahmed Ramadan
Ahmed Ramadan

Reputation: 11

Yes, you can use SlickGoto() method in slider ref and I will give you one of my solutions for this.

if your slider is a reusable component for example:

import Slider from 'react-slick'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

function CustomSlider({ children, indexToGo }) {
  const settings = {
    dots: false,
    infinite: true,
    speed: 400,
    slidesToShow: 1,
    slidesToScroll: 1,
  }

  return (
    <Slider
      {...settings}
      ref={slider => {
        slider?.slickGoTo(indexToGo)
      }}>
      {children}
    </Slider>
  )
}

export default CustomSlider

here you need to pass the indexToGo which is the index of the slide you need to go and using slider ref with slickGoTo() method passing to it the indexToGo, now you easily can go to any slider using only the index of the slide you need to go.

Upvotes: 1

Ed Lucas
Ed Lucas

Reputation: 7355

If this.slider is a ref to your Slick component, you can force the slideshow to show a slide by calling the method slickGoTo() with the index of the desired slide. For example, to show the second slide:

this.slider.current.slickGoTo(1);

For details on the methods that you can call using your ref, see: react-slick API: Methods.

Upvotes: 5

Related Questions