Bootstrap Snippet Simple animate images fadeIn from one to another jQuery using HTML Javascript

1
2
3
4
5
6
7
8
9
10
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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++;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple animate images fadeIn from one to another jQuery"
Bootstrap 4.1.1 Snippet by blackgirl

Related: See More

Questions / Comments:

"Simple animate images fadeIn from one to another jQuery" Bootstrap 4.1.1 Snippet by blackgirl

Related: See More

Questions / Comments:

"Simple animate images fadeIn from one to another jQuery"
Bootstrap 4.1.1 Snippet by blackgirl