llevo un tiempo trabajando en una función de javascript que hace pasar al siguiente div cuando hago click en la imagen de fondo, o por tiempo.
Bien esta función ya la conseguí, el problema es que ahora no consigo hacer que al hacer click en la parte derecha pase a la siguiente y si hago click en la parte izquierda se mueva hacia atrás.
Esta es la función que tengo por ahora :
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var boxContainer = $('.boxes');
var allBoxes = boxContainer.children("div");
var timeout;
transitionBox(null, allBoxes.first());
boxContainer.click(function() {
var from = boxContainer.children('div:visible');
var to = findNext(from);
transitionBox(from, to);
});
function findNext(to) {
if (to.is(":last-child")) {
return to.closest(".boxes").children("div").first();
} else {
return to.next();
}
}
function transitionBox(from, to) {
clearTimeout(timeout);
function next() {
var nextTo = findNext(to);
to.fadeIn(500, function() {
timeout = setTimeout(function() {
transitionBox(to, nextTo);
}, 5000);
});
}
if (from) {
from.fadeOut(800, next);
} else {
next();
}
}
});
</script>
Me recomendaron realizar unos botones botones flotantes de dirección como un slider standard para controlarlo con un event.stopPropagation(), pero no doy hecho.
Muchas gracias de antemano.
Os dejo por aqui el jsFiddle : https://jsfiddle.net/v1e1exL8/5/