Ops,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel {
width: 350px;
height: 170px;
position: relative;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
--op: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, var(--op)) 0 100%), var(--src);
background-size: 350px 170px;
}
.carousel.vertical {
width: 170px;
height: 350px;
background-size: 170px 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".carousel").forEach(function(el) {
let {
src,
num,
pause = 3000,
i = 0,
op = 1,
delta = .005
} = el.dataset;
function hide() {
op += delta;
if (op > 1) {
op = 1;
delta = -delta;
++i;
el.style.setProperty("--src", `url('${src+i}')`);
i %= num;
}
el.style.setProperty("--op", op);
requestAnimationFrame(op == 1 ? show : hide);
}
function show() {
op += delta;
if (op < 0) op = 0;
el.style.setProperty("--op", op);
if (op) requestAnimationFrame(show);
else {
delta = -delta;
window.setTimeout(hide, pause);
}
}
requestAnimationFrame(hide);
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000" data-num=3 data-src='https://loremflickr.com/350/170/kitty,kitten?random='>
12345
</div>
<div class="carousel vertical" data-pause="5000" data-num=12 data-src='https://loremflickr.com/170/350/dog,hound?random='>
12345
</div>
</body>
</html>