1
I am using a slider jQuery, but I would like to improve it in the question Accessibility.
I’d like the arrow keys on the left ← and right →, navigate my slider similarly to click the navigation arrows. But I would also like that when pressing the directional keys, the slide image would change obeying the direction in which it was keyed (animation often found in mobile gallery applications).
Logo if user presses →, wish the image fade to the left, and if press ← wish that the image fades to the 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>
<div class="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>
what you say until I work, the images go sideways, only they just go sideways, because the image keeps repeating itself, and the intention is to pass to the side and show the next image of the list, and not the same. And about the fact that moving to the "side" does not need to be taken literally, when I said move to the side I only meant to change the image to next whether it is the previous or the next. Look at the example "http://jsfiddle.net/veloosooo/ccr25peL/3/". If you click on the arrows the images change, now if you use the arrow keys the images go to the side, only repeats the same.
– ivan veloso
Okay, I was really having problems, I fixed and edited this answer, check out @ivanveloso
– Paulo Roberto Rosa
Now yes. It’s perfect. Thank you
– ivan veloso