0

I have a slider built with Glide.js that has 6 slides, all with links. It needs to be tabbable for our keyboard users, but so far it's not working.

If the user tabs through the page, it stops on every photo and then jumps to the first bullet below.

Then if the user clicks the first bullet it does nothing. as the user progresses through the bullets, the images slide and eventually go right off the screen into empty space. The best the user can then do is tab back to the first bullet which only brings them as far back as image 3. Is this a bug or is there something that can be done? I feel like I've tried everything.

Here's my code on code pen:
https://codepen.io/cristenrh/full/ExpwRNz

or an example on my website:
https://hewettcentral.com/cristen/carousel.html

I've tried using different variables for bullet one, like "<<". I've tried using glide.update() once the user gets to the first bullet and I've even tried glide.mount(). Neither work. The closest I've come is to start using negative numbers in the bullets, but that really breaks it further.

Cristen Roberts Hewett
  • 1
  • 2
  • Welcome to Stack Overflow! If you are going to attach a link to your code, please also attach your code to the question. Links can be blocked by web filters, and can go offline. Attaching your code to the question removes both these issues. I recommend you check out [ask] and [edit] your question to add formatted code. – Fastnlight Jan 17 '23 at 22:12
  • If I click on the pagination control ("bullets") below the pictures to get my focus on that element, then if I TAB through them and press ENTER, it correctly scrolls the cake picture into view. If I drag the slider with a mouse so that I can only see "cake 6" and then click on the first bullets, "cake 1" correctly scrolls into view. I can then TAB/ENTER on the other bullets and they work fine. The problem only seems to happen if the slider is scrolled through the keyboard instead of the mouse. That seems to confuse the viewport setting of the slider. It appears to be a glide bug. – slugolicious Jan 18 '23 at 05:55
  • If you look at the `
      ` for the slider it has a CSS style of `transform:translate3d(100px, 0px, 0px)`. If you drag the slider with a mouse, you'll see the first value in that translate change, such as `transform:translate3d(-404px, 0px, 0px)`. (Your numbers might be diff). As long as the `translate3d` changes, the bullets correctly scroll the cake image into view. However, if you TAB through the cake pics, causing the slider to scroll, you'll see the `translate3d` does **not** change. That's what's causing the problem. Glide has a bug that it's not updating the viewport upon keyboard events.
     – slugolicious Jan 18 '23 at 06:00
  • Hi Cristen. I see that you already reported the bug over at Glide.js’s Github. That’s great! You might notice that the title of your question actually is none, but a statement of the presence of that bug. What are you looking for here at stackoverflow? A workaround? – Andy Jan 18 '23 at 09:04
  • Yes I'm looking for a workaround. Are you saying I entered it wrong at Github? – Cristen Roberts Hewett Jan 18 '23 at 15:15

0 Answers0