iterate focus with keyboard arrows on images in different div’s
hi all,
i want to be able to move focus on images
that has the same class,
with the keyboard arrows (in a thumbnail scroller).
this is what i have:
html:
<div
class
=
"swiper-wrapper"
id=
"swiper-wrapper"
> <div
class
=
"swiper-slide"
tabindex=
"0"
><img src=
"cards/jpeg1.jpg"
alt=
""
class
=
"thumb"
></div> <div
class
=
"swiper-slide"
tabindex=
"-1"
><img src=
"cards/jpeg2.jpg"
alt=
""
class
=
"thumb"
></div> </div>
jquery:
var
parent =
document
.getElementById(
"swiper-wrapper"
);
var
children =
document
.getElementById(
"swiper-wrapper"
).children;
for
(
var
i =
0
; i < children.length; i++) { $(
'.swiper-slide, select'
).keydown(
function (e)
{
if
(e.keyCode ==
39
) { $(
this
).next(
'.swiper-slide , select'
).focus(); }
else
if
(e.keyCode ==
37
) { $(
this
).prev(
'.swiper-slide , select'
).focus(); } }) }
this gives me keyboard control focus only on the div's containing the images.
how do i improve it to move the focus between the actual images?