How to Set the tabindex on a Javascript Slider

Question

I'm trying to set the tabindex on the arrows associated with a slider like this one , but the arrows get skipped when using tab to move from one element on the web page to the next. I tried this ...

    <a class="prev" onclick="plusSlides(-1).tabIndex = '3'">❮</a>
    <a class="next" onclick="plusSlides(1).tabIndex = '4'">❯</a>

... without success. Maybe the tabIndex property requires that all elements are labeled w/ tabIndex for it to function? IDK.

Any thoughts / comments on how to implement this are welcome.

Answer 1

<a class="prev" onclick="plusSlides(-1,3)">❮</a>
<a class="next" onclick="plusSlides(1,4)">❯</a>

function plusSlides(n,index) {
  showSlides(index += n);
}

function currentSlide(n,index) {
  showSlides(index = n);
}

send index in side function

Answer 2

I found an answer here . The slider's arrows are traversable w/ the keyboard's tab key when the tabindex is set as follows:

    <a class="prev" id="previd" tabindex="0" onclick="plusSlides(-1)">❮</a>
    <a class="next" id="nextid" tabindex="0" onclick="plusSlides(1)">❯</a>