Automatic slider plus controls. Divergence between the two

Question

I am doing an automatic fadein/out slider but I would like to implement controls as well (next/Prev), the problem is that I cannot connect these two features. For example: if you are in slide1 and I click on next (slide2) the automatic part will change again to slide2 instead of changing to slide3, since slide2 is where we are.

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: controls:

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);
}

NOTE: Each of them by itself works well, only when I try to put the two together does there exist inconsistency. Any hint?

Answer 1

Instead of defining the code that passes to the next slide inside the setInterval, you could simply simulate the click (where the passage to the next item is set by jQuery) within that setInterval.

That is; instead of using:

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

Use this:

setInterval(function(){

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

}, 5000);

Thus, to each 5000 milliseconds all logic contained in '#nextHighlight' will be executed, and you will not have jobs defined two logics (but only that of the button that passes.

Look at this example JSFIDDLE