Slide with tab key, is it possible? about react-animated-slider

[erichbehrens]

Hi, this is an interesting use case! Here you can find a basic implementation: https://codesandbox.io/s/3zoykpkz5

There are still a few issues to address:

• after navigating to the next slide the UI will blink. Maybe it can be prevented by manually setting the focus to the next element after the animation. This does not happen if you use event.preventDefault()
• pressing tab on the last slide will not focus the element on the first slide. Can be fixed by manually setting focus to that element (maybe using same fix for the previous point)

PS: I keep it in English as it can be useful for others, but... lep pozdrav! :)

[DamirTesnjak]

Hi, this is an interesting use case! Here you can find a basic implementation: https://codesandbox.io/s/3zoykpkz5

There are still a few issues to address:

* after navigating to the next slide the UI will blink. Maybe it can be prevented by manually setting the focus to the next element after the animation. This does not happen if you use `event.preventDefault()`

* pressing tab on the last slide will not focus the element on the first slide. Can be fixed by manually setting focus to that element (maybe using same fix for the previous point)

PS: I keep it in English as it can be useful for others, but... lep pozdrav! :)

Will it also work if I have three cards on a single slider page?
Link to screenshot: https://drive.google.com/file/d/1CKVN1S9ral_hWAWJrNQN971P0D4jw_wZ/view?usp=sharing
Depend on screen size, we use slider with one card on single page or three cards on single page. In short, slider is responsive acording to the layout of a web page. Thank you for an answer.

[erichbehrens]

In this case your js code should also know how many cards are displayed. You could add a data-card-index attribute to the last field of each card and in the event handler you can check if it was triggered by the last displayed card

if (event.target.getAttribute('data-card-index') % displayedCards === 0) {
// go to next slide
}

or

you could only assign onKeyDown={this.handleKeyDown} to the last visible card using a similar logic as above.