<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="product">
<article class="product">
<img src="https://www.vdr.com.ua/images/prod/2012/20121016135516.jpg" />
</article>
</section>
var images = [];
images[0] = "https://www.vdr.com.ua/images/prod/2012/20121016135516.jpg";
images[1] = "https://www.zmm-tos.bg/images/stories/virtuemart/product/%D0%951.jpg";
images[2] = "http://www.stomana.org.ua/img/product/2012/24-stanok-Stomana-FS-32-N.jpg";
var i = 0;
setInterval(fadeDivs, 4000);
function fadeDivs() {
i = i < images.length ? i : 0;
console.log(i)
$('.product img').fadeOut(100, function(){
$(this).attr('src', images[i]).fadeIn(100);
})
i++;
}
