Блог

я все еще изучаю JS, это мой первый слайдер в истории. это работает. Понятия не имею, как анимировать изменение фона с помощью размытия или просто медленного изменения/ Пожалуйста, помогите

https://jsfiddle.net/normal64/p18rqnwx/45/

 let gotSlider = document.getElementById("slider");
let gotRightButton = document.getElementById("rightButton");
gotRightButton.addEventListener("click", moveRight);
let gotLeftButton = document.getElementById("leftButton");
gotLeftButton.addEventListener("click", moveLeft);

let backs = [
{url: "https://image.shutterstock.com/image-photo/female-american-soldier-stock-image-600w-590513933.jpg"},
{url: "https://thumbs.dreamstime.com/z/confused-computer-17350886.jpg"},
{url: "https://www.featurepics.com/StockImage/20130723/thinking-man-stock-image-2751950.jpg"},
{url: "https://thumbs.dreamstime.com/z/arabic-man-thumb-up-happy-giving-white-background-31003456.jpg"}
]
let image = 0;
 gotSlider.style.backgroundImage = "url"  "("   backs[image].url   ")" ;  
  gotSlider.style.backgroundSize = "cover" ;  

function moveRight() {
if (image == backs.length){
    return;
}
image  ;
gotSlider.style.backgroundImage = "url"  "("   backs[image].url   ")" ;  
}

function moveLeft() {
if (image == 0){
    return;
}
image--;
gotSlider.style.backgroundImage = "url"  "("   backs[image].url   ")" ;  
}