converting jquery hide/fade/delay/animation to pure js

I am trying to remove the jquery dependency from my code and came across a few lines I have no idea how to replicate in js.

I know I can use setTimeout() in place of delay, css transitions for the fading, and css for the hide… just not sure how to go about it and haven’t been able to figure it out.

Any help would be appreciated.

part in question that needs converted to plain js :

//loop that actually does the work
(function loopBg(){     
    $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
        $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
        loopBg();
    });
}());

entire original jquery code :

//2nd position is where it starts from
var images = [
    ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
];

var $bottomSlide = $('#intro-anim .slider-bottom'),
    $topSlide = $('#intro-anim .slider-top'),
    n = images.length,
    c = 0; // loop counter

// preload array of images
for(var i=0; i<n; i++){
    var tImg = new Image();
    tImg.src = images[i][0];
}

$bottomSlide.css({
    'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]
}); 

//loop that actually does the work
(function loopBg(){     
    $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
        $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
        loopBg();
    });
}());

my conversion minus the section in question :

//2nd position is where it starts from
const images = [
    ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
];

const bottomSlide = document.querySelector('#intro-anim .slider-bottom'),
    topSlide = document.querySelector('#intro-anim .slider-top');

let n = images.length,
    c = 0; //loop counter

//preload array of images
for(let i=0; i<n; i++){
    let tImg = new Image();
    tImg.src = images[i][0];
}

bottomSlide.setAttribute('style', 'background: transparent url('+images[++c%n][0]+') '+images[c%n][1]);

//loop that actually does the work
//still needs converted
//(function loopBg(){       
//  $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
//      $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
//      loopBg();
//  });
//}());

Answer

Kind of hacky, but replicates the same behavior as before which is what I wanted. I’ll look into ways to make this cleaner.

The gist is the top slider changes its image and fades in. After fade in the bottom slider changes to the same image while the top goes back to opacity 0 (keeping the same image visible). Repeats every 6 seconds going to the next image in the array.

//2nd position is where it starts from
const images = [
    ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
];

const bottomSlide = document.querySelector('#intro-anim .slider-bottom'),
    topSlide = document.querySelector('#intro-anim .slider-top');

let n = images.length,
    c = 0; //loop counter

//preload array of images
for(var i=0; i<n; i++){
    var tImg = new Image();
    tImg.src = images[i][0];
}

bottomSlide.style.background = 'transparent url('+images[++c%n][0]+') '+images[c%n][1];
topSlide.style.opacity = '0';

//loop that actually does the work
(function loopBg(){
    
    setTimeout(function() {
    
        topSlide.style.background = 'transparent url('+images[++c%n][0]+') '+images[c%n][1];
        topSlide.style.opacity = '1';
        
        setTimeout(function() {
            bottomSlide.style.background = 'transparent url('+images[c%n][0]+') '+images[c%n][1];
            topSlide.style.opacity = '0';
        }, 3000); //css transition for '#intro-anim .slider-top' is 2 seconds so do 3 to be safe and let it finish (6s is the total between slides) 
        
        loopBg();
    }, 6000);       

}());

css with added transition for 2s :

#intro-anim .slider-top,
#intro-anim .slider-bottom {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
}
#intro-anim .slider-top {
    transition: opacity 2s ease-in-out;
}