Slider with external buttons

Support
#1

Hi,
I have a slider with external buttons. The layout is
Row (with data-x-slide-context attribute)
Column 1 (buttons with data-x-slide-goto attribute)
Column 2 (with the slider)

It works, but there are two problems:

  1. Accessibilty: The buttons are tabbable, but pressing enter while the button is selected does not change the slide. Clicking the button works. Is there an additional setting to enable this?
  2. Potential bug with several sliders: I duplicated the row, and the buttons work for their own slider, without changing the displayed slide in the other slider - as expected. However: when I click a button in the lower slider, while it updates the slide of the lower slider, it scrolls back up to the upper slider.
#3

Hello @striata,

Thank you for the inquiry.

We may need to inspect the slider to properly check the issue. Please provide the site URL and login details in a secure note.Have you tried using a Button element to make sure the external slide navigation is accessible using the Enter key?

For item number 2, make sure to use the data-x-slider-id attribute to distinguish between different sliders. Please check the documentation below.

– https://theme.co/docs/sliders#custom-attributes

If you need additional help, provide the site URL and login details in the secure note.

Best regards.

#4

Hi, I could solve the first problem by entering “#” as a link in the button. This is not necessary for mouse-clicks, but is apparently needed for triggering the button by “Enter” once selected by tabbing to it

The second problem has not been solved by using the data-x-slider-id attribute (value 1 or 2 for first or second slider, respectively). It has the same behavior as with the data-x-slide-context attribute. Not using any attributes at all also gives the same behavior: The correct slider changes to the correct slide, but for the second slider, it scrolls up to the first slider.
(See attached secure note for login information)

I have a follow-up question:
Can one show a specific slide via an url link, similar to tabs? I have given the slide an ID. Adding the id to the url scrolls to the correct place in the document, but it does not make the specific slide active.

#5

Thank you for the update. We applied the data-x-slider-id attribute to the first set of Button elements, then set the value to “slide1”. Set the same attribute to the second set of buttons, with the value “slide2”. We then applied the same value (slide1, slide2) to the ID field of the Slider Container elements. Please make sure to purge the cache before testing.