SOURCE

const a = ['-0px', '-20px', '-40px', '-60px'];
const b = [
    `url('https://images.pexels.com/photos/3762800/pexels-photo-3762800.jpeg')`,
    `url('https://images.pexels.com/photos/3807755/pexels-photo-3807755.jpeg')`,
    `url('https://images.pexels.com/photos/1720186/pexels-photo-1720186.jpeg')`,
    `url('https://images.pexels.com/photos/4145197/pexels-photo-4145197.jpeg')`,
]

const fn = (index, time) => {
    console.log(index)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            $('#id1').css('background-position-x', a[index]);
            // $('#id1').css('background-image', b[index]);
            // $('#id1').css('background-image', `url('http://47.101.214.96/img/${index * 3}.png')`)
            resolve();
        },time)
    })
}

(async() => {
    await fn(0, 1000)
    await fn(1, 1000)
    await fn(2, 1000)
    await fn(3, 1000)
})();

setInterval(async() => {
    await fn(0, 1000)
    await fn(1, 1000)
    await fn(2, 1000)
    await fn(3, 1000)
} , 4000)

<div id="id1"></div>

#id1{
    height: 100px;
    width:  200px;
    background-image: url('https://images.pexels.com/photos/3762800/pexels-photo-3762800.jpeg');
    background-size: cover;
    background-position-x: -10px;
}