Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/prev), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next
(slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.
HTML:
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">
JQUERY: controlos:
function sliderHighlights() {
$(".containerHigh:gt(0)").hide();
$(document).on('click', '#nextHighlight', function() {
$('.containerHigh').stop().fadeOut(500);
var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
var highlightNext = highlightOn+1;
if(highlightOn == $('.containerHigh').length) {
highlightNext = 1;
}
$('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);
});
$(document).on('click', '#prevHighlight', function() {
$('.containerHigh').stop().fadeOut(500);
var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
var highlightprev = highlightOn-1;
if(highlightOn == 1) {
highlightprev = $('.containerHigh').length;
}
$('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);
});
}
JQUERY: autoSlider
function autoSliderHighlights() {
setInterval(function() {
$('.containerHigh:visible')
.fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
}, 5000);
}
NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?