如何在div元素上转换多个背景图像？

我从以下Codepen示例开始：https ://codepen.io/dudleystorey/pen/qEoKzZ

JS：

var bgImageArray = ["lonely.jpg", "uluwatu.jpg"..."],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
    window.clearTimeout();
    var k = 0;
    for (i = 0; i < bgImageArray.length; i++) {
        setTimeout(function(){ 
            document.documentElement.style.background = 
            "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
            document.documentElement.style.backgroundSize ="cover";
        if ((k + 1) === bgImageArray.length) { setTimeout(function() 
            { backgroundSequence() }, (secs * 1000))} else { k++; }         
        }, (secs * 1000) * i)   
    }
}
backgroundSequence();

我在这里尝试的小提琴：https : //jsfiddle.net/ByteMyPixel/x37fk6js/1/

JS：

    var bgImageArray = ['~text?txtsize=69&txt=Slide+2&w=816&h=300&txttrack=0', 
            '~text?txtsize=69&txt=Slide+3&w=816&h=300&txttrack=0'],
    base = "https://placeholdit.imgix.net/",
    secs = 4;
    bgImageArray.forEach(function(img){
        new Image().src = base + img; 
        // caches images, avoiding white flash between background replacements
    });

    function backgroundSequence() {
        window.clearTimeout();
        var k = 0;
        for (i = 0; i < bgImageArray.length; i++) {
            setTimeout(function(){ 
                $('.tab-content-wrapper').css('backgroundImage', 
            "url(" + base + bgImageArray[k] + ") no-repeat center center fixed");
                $('.tab-content-wrapper').css('backgroundSize' , "cover");
            if ((k + 1) === bgImageArray.length) { setTimeout(function() 
            { backgroundSequence() }, (secs * 1000))} else { k++; }         
            }, (secs * 1000) * i)   
        }
    }
    backgroundSequence(); 

基本上，我希望本部分右边的背景图像在约5张不同的图像之间转换：