Попробуйте эту простую анимацию постепенного затухания для изображения в фокусе, предоставлено вопрос :
const images = ["https://images.theconversation.com/files/304244/original/file-20191128-178107-9wucox.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip", "https://bigcats.be/images/resized/750x-header-cat.jpg", "https://cdn.the-scientist.com/assets/articleNo/66820/aImg/34883/bird-article-s.png", "https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-600w-407021107.jpg", "https://cdn.the-scientist.com/assets/articleNo/66820/aImg/34883/bird-article-s.png"];
const left = document.getElementById("carousel-left");
const middle = document.getElementById("carousel-middle");
const right = document.getElementById("carousel-right");
let currentIndex = 0;
function focusImage() {
const leftSrc = currentIndex - 1 < 0 ? images.length - 1 : currentIndex - 1;
const middleSrc = currentIndex;
const rightSrc = currentIndex + 1 >= images.length ? 0 : currentIndex + 1;
left.src = images[leftSrc];
middle.src = images[middleSrc];
right.src = images[rightSrc];
middle.style.opacity=0;
middle.style.filter='alpha(opacity=0)';
animate(middle,750,0,100);
}
function previous() {
currentIndex = currentIndex - 1 < 0 ? images.length - 1 : currentIndex - 1;
focusImage();
}
function next() {
currentIndex = currentIndex + 1 >= images.length ? 0 : currentIndex + 1;
focusImage();
}
function animate(obj,time,a,b)
{
var frame = 30;//FPS Rate, so this is currently set to 30 fps
var second = 1000;
var fps = (second/frame);
var distance = parseInt(b) - parseInt(a);
var rate = ((distance/frame)*second)/time;
setTimeout
(
function()
{
a += rate;
obj.style.opacity=(a/100);
obj.style.filter='alpha(opacity='+a+')';
newTime = time-fps;
if((parseInt(a) >= parseInt(b) && distance >= 0) || (parseInt(a) <= parseInt(b) && distance < 0))
{
obj.style.opacity=(b/100);
obj.style.filter='alpha(opacity='+b+')';
}
else
animate(obj,newTime,a,b);
}
,fps
);
}
focusImage();
left.addEventListener("click", previous);
right.addEventListener("click", next);
#carousel-container {
width: 100%;
height: 350px;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-around;
}
img {
border: 1px solid;
}
.carousel-side {
opacity: .5;
width: 225px;
height: 140px;
margin-top: 100px;
cursor: pointer;
}
#carousel-middle {
width: 40%;
height: 250px;
margin-top: 25px;
}
<body>
<div id="carousel-container">
<img id="carousel-left" class="carousel-side">
<img id="carousel-middle">
<img id="carousel-right" class="carousel-side">
</div>
<button onclick="previous()">previous</button>
<button onclick="next()">next</button>
</body>