2

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?

1 Resposta 1

1

Ao invés de definir o código que passa para o próximo slide dentro do setInterval, você poderia simplesmente simular o click (onde é definida a passagem para o próximo item pelo jQuery) dentro desse setInterval.

Ou seja; ao invés de usar:

function autoSliderHighlights() {
   setInterval(function() { 
      $('.containerHigh:eq(0)')
         .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
   },  5000);
}

Use isso:

setInterval(function(){

    $('#nextHighlight').trigger('click');

}, 5000);

Assim, a cada 5000 milissegundos toda a lógica contida em '#nextHighlight' será executada, e você não vai ter trabalhos definido duas lógicas (mas apenas a do botão que passa.

Veja esse exemplo nesse JSFIDDLE

2
  • 1
    Muito obrigado, era isto mesmo... desconhecia a função trigger
    – Miguel
    Commented 3/02/2015 às 11:06
  • Você pode fazer simplesmente um $('#nextHighlight').click() também. É a mesma coisa! Commented 3/02/2015 às 11:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .