How to get currentSlide Index

[anandrikka]

How can we get the current slide index, so that I can make a http call to fetch more. Current documentation doesn't help much. Can anyone help me out ?

[akiran]

you can user beforeChange or afterChange methods https://github.com/akiran/react-slick/blob/master/examples/SlideChangeHooks.js

[ArtemKha]

you can user beforeChange or afterChange methods https://github.com/akiran/react-slick/blob/master/examples/SlideChangeHooks.js

I need such api for testing and these methods are not so convenient

[dominicg666]

how to get the currently active item,

When I have tried to add focusOnSelect event, but not getting the properly current index of an item, please help me, anyone tried this?

[Lloydinator]

In case anyone struggles with this in the future, you could hook into beforeChange like this:

const settings = {
        arrows: false,
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1, 
        beforeChange: (oldIndex, newIndex) => {
            switch (newIndex) {
                case 0: 
                    setThing('thing1')
                    break
                case 1:
                    setThing('thing2')
                    break
                 ...
                default:
            }
        }
    }

Of course, this is an example and you could do it in any way that you wish.

[max8989]

It works for me with beforeChange(), AfterChange() is never called.

const [currentSlideNumber, setCurrentSlideNumber] = useState(0);

<Slider {...settings} beforeChange={(currentSlide: number, nextSlide: number) => setCurrentSlideNumber(nextSlide)}>

[Roopaish]

Better use afterChange, if you are using useState to keep track of currentIndex which is being used to render dots/thumbs differnetly to avoid animation from being janky

<Slider
          ref={slider}
          afterChange={(newIndex) => {
            setCurrentIndex(newIndex)
          }}
        >
        ...
        </Slider>