Slider automatic more controls. Divergence between the two

Question

Slider automatic more controls. Divergence between the two

Navigation

#1 by (1 votes)

2

I'm making an automatic fadeIn / Out slider but I'd like to implement controls too (next / prev), the problem is that I can not connect these two features. For example, if it is on slide1 and I load it on next (slide2) the automatic part will change again to slide2 instead of switching 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 alone works well, only when I try to join the two is there incoherence. Any tips?

jquery slider

asked by anonymous 03.02.2015 / 11:46

1 answer

jFrame frozen / hung when opened in a jTable How to request administrator permission in Visual Basic.NET

score 1 · Accepted Answer

Instead of setting the code that passes to the next slide within setInterval , you could simply simulate the click (where 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);

So, every% of% milliseconds all logic contained in '#nextHighlight' will be executed, and you will not have jobs defined by two logic (but only that of the passing button.

See this example in JSFIDDLE