Question

You’ve always been a great help, so I have no doubt you’ll be able to sort this issue out with no problem!

Essentially what I’ve got is a carousel that switches between three divs, #Item1, #Item2, #Item3. I also have three buttons (btn1, btn2, btn3). The aim is that the carousel scrolls through as it normally would, but when you click a button it jumps back to that position and carries on from there.

Currently the carousel jumps back to the correct div at the click of the button, but it then goes to where it should have been. I’m sure I’m missing something simple!

Also, would there be a way of pausing this when the mouse is positioned over it?

I’ve put together the following jQuery, would you be able to tell me where I’m going wrong?;

$(function() {


  $('#Item1').fadeIn(1000);

  var timer = setInterval( whichDiv, 6000);

  var counter = 2;

  function whichDiv() {
    if (counter == 0) { counter++; return; }
    else if (counter == 1){
        $('#Item1').addClass('Maxyactive');
        $('#Item2').removeClass('Maxyactive');
        $('#Item3').removeClass('Maxyactive');      
        $('#Item1').fadeIn(1000);
        $('#Item2').hide();
        $('#Item3').hide();
        counter++;
    }
    else if (counter == 2){
        $('#Item1').removeClass('Maxyactive');
        $('#Item2').addClass('Maxyactive');
        $('#Item3').removeClass('Maxyactive');      
        $('#Item1').hide();
        $('#Item2').fadeIn(1000);
        $('#Item3').hide();   
        counter++;
    }
    else if (counter == 3){
        $('#Item1').removeClass('Maxyactive');
        $('#Item2').removeClass('Maxyactive');
        $('#Item3').addClass('Maxyactive');      
        $('#Item1').hide();
        $('#Item2').hide();
        $('#Item3').fadeIn(1000);      
        counter = 1;
    }



  }





$(".btn1").click(function ShowFirst() {

    $('#Item1').addClass('Maxyactive');
    $('#Item2').removeClass('Maxyactive');
    $('#Item3').removeClass('Maxyactive');      
    $('#Item1').fadeIn(1000);
    $('#Item2').hide();
    $('#Item3').hide();
    counter == 2;
}); 



$(".btn2").click(function ShowSecond() {

    $('#Item1').removeClass('Maxyactive');
    $('#Item2').addClass('Maxyactive');
    $('#Item3').removeClass('Maxyactive');      
    $('#Item1').hide();
    $('#Item2').fadeIn(1000);
    $('#Item3').hide();   
    counter == 3;

}); 



$(".btn3").click(function ShowThird() {

    $('#Item1').removeClass('Maxyactive');
    $('#Item2').removeClass('Maxyactive');
    $('#Item3').addClass('Maxyactive');      
    $('#Item1').hide();
    $('#Item2').hide();
    $('#Item3').fadeIn(1000);   
    counter == 1;

}); 

});

Answer 1

In your button click events you are trying to assign a value to counter with == but this just does a comparison, maybe you need ‘counter = 1;’ etc?

To pause, you could try binding the mouse enter/leave events on the slider to clearInterval(timer); and recreate it.