Kevin Powell - Community•2y ago

Scroll horizontally through a slider

Hello 👋 So I have this Slider Container and I want it to be scrollable when the keyboard user tab into it? I'm not sure what i can do to achieve this without over-enginer it. Now if you want to scroll through it you have to click on the container first and then you can use your arrow keys to scroll, as you can see in the CodePen below

5 Replies

~MARSMAN~•2y ago

https://codepen.io/ThatMartianDev/pen/mdjmOLz

MarsMan

CodePen

slider

...

MarkBoots•2y ago

a keyboard user can use his arrow keys to go left and right within the container. just like he would do on a regular page with the up and down keys otherwise you can give a tabindex="0" to each item, then they are tabable too and ofcourse there are js ways

~MARSMAN~•2y ago

Yes i tried doing that, clicking the left/right arrow keys but it doesn't scroll unless i click on the container with my mouse. Is it just for me that it's working that way? Also i did a tabindex="0" but didn't work. I'm trying to avoid the Js ways for now 😬.

MarkBoots•2y ago

okay, i checked it out, there probably is different behaviours between browser. Think if you only set tabindex=0 on the container. you can tab into the container and then use the arrows if you set this in your css you can see when it is focused

<ul class="slider" tabindex="0">
  <li class="slider-item">slider item</li>
  ...
</ul>

<ul class="slider" tabindex="0">
  <li class="slider-item">slider item</li>
  ...
</ul>

.slider:focus{
  outline: 2px solid hotpink
}

.slider:focus{
  outline: 2px solid hotpink
}

~MARSMAN~•2y ago

Yeah it's my browser.. tried it on another and it worked. I guess i should do it the JS way in the end, just in case this behavior happens for other users 🫣 Thanks Mark!

Gaming

Programming

Scroll horizontally through a slider