I'm using a jQuery slider, but I would like to improve it in Accessibility .
I would like the keyboard arrows ← and right → to navigate my slider similarly to the click navigation arrows. But I would also like that when pressing the directional keys, the image of the slide changed obeying the direction in which it was keyed (animation often found in gallery applications for mobile).
So if the user presses → , I want the image to go to the left, and if I press ← I want the image to go right.
/*! http://responsiveslides.com v1.54 by @viljamis */
(function (c, I, B) {
c.fn.responsiveSlides = function (l) {
var a = c.extend({
auto: !0,
speed: 500,
timeout: 4000,
pager: !1,
nav: !1,
random: !1,
pause: !1,
pauseControls: !0,
prevText: 'Previous',
nextText: 'Next',
maxwidth: '',
navContainer: '',
manualControls: '',
namespace: 'rslides',
before: c.noop,
after: c.noop
}, l);
return this.each(function () {
B++;
var f = c(this),
s,
r,
t,
m,
p,
q,
n = 0,
e = f.children(),
C = e.size(),
h = parseFloat(a.speed),
D = parseFloat(a.timeout),
u = parseFloat(a.maxwidth),
g = a.namespace,
d = g + B,
E = g + '_nav ' + d + '_nav',
v = g + '_here',
j = d + '_on',
w = d + '_s',
k = c('<ul class=\'' + g + '_tabs ' + d + '_tabs\' />'),
x = {
'float': 'left',
position: 'relative',
opacity: 1,
zIndex: 2
},
y = {
'float': 'none',
position: 'absolute',
opacity: 0,
zIndex: 1
},
F = function () {
var b = (document.body || document.documentElement).style,
a = 'transition';
if ('string' === typeof b[a]) return !0;
s = [
'Moz',
'Webkit',
'Khtml',
'O',
'ms'
];
var a = a.charAt(0).toUpperCase() + a.substr(1),
c;
for (c = 0; c < s.length; c++) if ('string' === typeof b[s[c] + a]) return !0;
return !1
}(),
z = function (b) {
a.before(b);
F ? (e.removeClass(j).css(y).eq(b).addClass(j).css(x), n = b, setTimeout(function () {
a.after(b)
}, h)) : e.stop().fadeOut(h, function () {
c(this).removeClass(j).css(y).css('opacity', 1)
}).eq(b).fadeIn(h, function () {
c(this).addClass(j).css(x);
a.after(b);
n = b
})
};
a.random && (e.sort(function () {
return Math.round(Math.random()) - 0.5
}), f.empty().append(e));
e.each(function (a) {
this.id = w + a
});
f.addClass(g + ' ' + d);
l && l.maxwidth && f.css('max-width', u);
e.hide().css(y).eq(0).addClass(j).css(x).show();
F && e.show().css({
'-webkit-transition': 'opacity ' + h + 'ms ease-in-out',
'-moz-transition': 'opacity ' +
h + 'ms ease-in-out',
'-o-transition': 'opacity ' + h + 'ms ease-in-out',
transition: 'opacity ' + h + 'ms ease-in-out'
});
if (1 < e.size()) {
if (D < h + 100) return;
if (a.pager && !a.manualControls) {
var A = [
];
e.each(function (a) {
a += 1;
A += '<li><a href=\'#\' class=\'' + w + a + '\'>' + a + '</a></li>'
});
k.append(A);
l.navContainer ? c(a.navContainer).append(k) : f.after(k)
}
a.manualControls && (k = c(a.manualControls), k.addClass(g + '_tabs ' + d + '_tabs'));
(a.pager || a.manualControls) && k.find('li').each(function (a) {
c(this).addClass(w + (a + 1))
});
if (a.pager || a.manualControls) q =
k.find('a'),
r = function (a) {
q.closest('li').removeClass(v).eq(a).addClass(v)
};
a.auto && (t = function () {
p = setInterval(function () {
e.stop(!0, !0);
var b = n + 1 < C ? n + 1 : 0;
(a.pager || a.manualControls) && r(b);
z(b)
}, D)
}, t());
m = function () {
a.auto && (clearInterval(p), t())
};
a.pause && f.hover(function () {
clearInterval(p)
}, function () {
m()
});
if (a.pager || a.manualControls) q.bind('click', function (b) {
b.preventDefault();
a.pauseControls || m();
b = q.index(this);
n === b || c('.' + j).queue('fx').length || (r(b), z(b))
}).eq(0).closest('li').addClass(v),
a.pauseControls && q.hover(function () {
clearInterval(p)
}, function () {
m()
});
if (a.nav) {
g = '<a href=\'#\' class=\'' + E + ' prev\'>' + a.prevText + '</a><a href=\'#\' class=\'' + E + ' next\'>' + a.nextText + '</a>';
l.navContainer ? c(a.navContainer).append(g) : f.after(g);
var d = c('.' + d + '_nav'),
G = d.filter('.prev');
d.bind('click', function (b) {
b.preventDefault();
b = c('.' + j);
if (!b.queue('fx').length) {
var d = e.index(b);
b = d - 1;
d = d + 1 < C ? n + 1 : 0;
z(c(this) [0] === G[0] ? b : d);
if (a.pager || a.manualControls) r(c(this) [0] === G[0] ? b : d);
a.pauseControls || m()
}
});
a.pauseControls && d.hover(function () {
clearInterval(p)
}, function () {
m()
})
}
}
if ('undefined' === typeof document.body.style.maxWidth && l.maxwidth) {
var H = function () {
f.css('width', '100%');
f.width() > u && f.css('width', u)
};
H();
c(I).bind('resize', function () {
H()
})
}
})
}
}) (jQuery, this, 0);
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 0,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
* {
margin: 0;
padding: 0;
}
/* Callback example */
.callbacks_container {
position: relative;
width: 100%; height:520px; background:#C39
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://i.imgur.com/lWEau8H.gif") no-repeat left top;
margin-top: -45px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
/*! BOX DO SLIDE */
.rslides {width:100%; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); text-align:center;}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li img {
max-width: 90%;
max-height:90%;
}
@media screen and (max-width: 600px) {
h1 {
font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.callbacks_nav {
top: 47%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="callbacks_container">
<ul class="rslides" id="slider4">
<li><img src="http://prodigital.com.br/wp-content/uploads/2014/03/Relogio-antigo-closeup.jpg"alt=""></li>
<li><img src="http://www.robsonpiresxerife.com/blog/wp-content/uploads/2012/01/relogio-111.jpg"alt=""></li>
<li><img src="http://relogiolandia.com/files/artigos/relogio-bolso.jpg"alt=""></li>
</ul>
</div>