JSFiddle - React, Tailwind, and code Playground

InFX slider - fadein and fadeout with time corrections - working demo with jump implemented

by Ben Clayton

HTML

<button class="btnstart">Start</button>
<button class="jmp0">Jump 0</button>
<button class="jmp1">Jump 1</button>
<button class="jmp2">Jump 2</button>

<div class="wrapper">
    <div class="pic"><img class="img0" src="http://www.infxsolutions.com/dyn/_mainads/global-comms.jpg" /></div>
    <div class="pic"><img class="img1" src="http://www.infxsolutions.com/dyn/_mainads/abstract-city.jpg" /></div>
    <div class="pic"><img class="img2" src="http://www.infxsolutions.com/dyn/_mainads/atomic-splits.jpg" /></div>
    <div class="pic"><img class="img3" src="http://www.infxsolutions.com/dyn/_mainads/bright-lights.jpg" /></div>
</div>
<input id="curr" />

CSS

.wrapper {position:absolute;top:100px;height:360px;width:940px;}
img {position:absolute;display:block;opacity:0}

JavaScript

var curr_index = undefined;
var fade_out_index = undefined;
var tid = undefined;

// ========================================

$('.btnstart').click(function() {
    start();
});

$('.jmp0').click(function() {
      jump(0);
});
$('.jmp1').click(function() {
      jump(1);
});
$('.jmp2').click(function() {
      jump(2);
});

// ========================================

function start() {
    curr_index = 0;
    fadeIn(curr_index);
}

function jump(idx) {
    console.log('jumping to index: ' + idx);
    
    if(idx === curr_index) {
        if(tid) {
             clearTimeout(tid);
              tid = setTimeout(next, 2000);
         }
        return;
    } else {
        fadeOut(curr_index);
    }
    
    curr_index = idx;
    fadeIn(curr_index);
}

function next() {
     console.log('next has been fired ' + (new Date()).getSeconds());
    fadeOut(curr_index);
    curr_index = (curr_index + 1) %4;
    fadeIn(curr_index);
}


function fadeIn(idx) {
    console.log('fading in: ' + idx);
    $('#curr').val("current index: " + curr_index);
    
    var opacity = $('.img' + idx).css('opacity');
    var time = (1 - opacity) * 5000;

    $('.img' + idx).stop(1).animate(
        {opacity:1},
        time,
        function() {
            console.log('my opacity is: ' + $(this).css('opacity'));
             console.log('set timer ' + (new Date()).getSeconds());
            if(tid) {
                clearTimeout(tid);
             }    
             tid = setTimeout(next, 2000);
        }
    );
}

function fadeOut(idx) {
    console.log('fading out: ' + idx);    
    fade_out_index = idx;
    var opacity = $('.img' + idx).css('opacity');
    var time = opacity * 5000;
    $('.img' + idx).stop(1).animate({opacity:0},time);
}