React-id-swiper: activeSlideKey shouldn't update the swipper on page scroll

[kolyabokov]

Lets say I have 3 slides

1. I set activeSlideKey to value corresponding to second slide
2. After page loads, swipper activates the second slide - OK
3. I swipe it to the first slide (or to the third), and then scroll the page down. Swipper activates second slide again - WRONG.
   It sould activate slide only once, when component is mounted (the prop activeSlideKey is said to be _Initial_ slide index)

[IlimaVIP]

I really need this activeSlideKey, for some reason I can't even get it work. But I see that you have said about this issues. Was there any progress since then?

[kolyabokov]

@IlimaVIP do you pass activeSlideKey as a number of slide?
If you create slider like this:

<Swiper {...swiperSettings}>
  {slides.map((slide, index) => (<div key={index}>[some markup]</div>))}
</Swiper>

then you should pass activeSlideKey as a string, e.g. if you want to activate a second slide, you should write: activeSlideKey: "1" (not activeSlideKey: 1 ), though the key type passed in map is integer.

[kidjp85]

Hi @kolyabokov , sorry for late response. Can you provide live demo from prepared Codesandbox ? You can find it from README . Thanks!

[IlimaVIP]

Yes @kolyabokov , I have tried this as well:

<Swiper {...params} activeSlideKey='5'> ... </Swiper>

If there's a way to solve this problem, it would be great.
The conversations on this are still going on:

1. StackOverflow: https://stackoverflow.com/questions/54581893/how-to-set-initial-active-slide-to-different-index-in-react-id-swiper
   2.Github: https://github.com/kidjp85/react-id-swiper/pull/227

[kidjp85]

@IlimaVIP , which value are you using for activeSlideKey ? It's not index slide number, it should be the key value you provide when render slide list.

const renderItem => (item, idx) => <div key={`${item.name}_${idx}`}>{item.name}</div>

return <Swiper>{items.map(renderItem)}</Swiper>

From the example above, key here should be slide_2_1 when second item's name is slide_2. If you want the initial slide display second item, you should provide key="slide_2_1"

[IlimaVIP]

Thank you @kidjp85 and @kolyabokov It worked :+1: :100:

[kolyabokov]

@kidjp85 Why swiper slides to activeSlideKey in componentDidUpdate lifecycle method, not in componentDidMount only? componentDidUpdate will be called even when nothing actually changes for swiper component itself, for example when parent component is rerendered.

Here is the sandbox example: https://codesandbox.io/s/nice-moser-stv5o?fontsize=14&hidenavigation=1&theme=dark
Third slide is activated by default. If I slide to the first slide, and then click "Increase" button (which just changes the component state, but doesn't change any swiper props), swiper will slide back to third slide. I think this is confusing and wrong bahaviour.

[kidjp85]

@kolyabokov , we no longer use React Class anymore so every logic stay in useEffect