e-partner,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel{
width: 350px;
height: 170px;
position: relative;
opacity: 0;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
transition: opacity .8s ease-in;
background-size: 350px 170px;
}
.carousel.show{
opacity: 1;
}
.carousel.vertical{
width: 170px;
height: 350px;
background-size: 170px 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".carousel"), function(el) {
var img = JSON.parse(el.dataset.src),
len = img.length,
i = len - 1,
p = el.dataset.pause || 5E3;
function g() {
i = ++i % len;
el.style.backgroundImage = "url(" + img[i] + ")";
el.classList.add("show");
window.setTimeout(k, p)
}
g();
function k() {
el.classList.remove("show");
window.setTimeout(g, 800)
}
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000"
data-src='["http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg",
"http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg",
"http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg",
"http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg"]'>
</div>
<div class="carousel vertical" data-pause="5000" data-src='[
"https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13",
"http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png",
"http://rugirlz.com/pics/hv_dp20088034.jpg",
"https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13"]'>
</div>
</body>
</html>