CODEWITHSUNDEEP
javascriptarraysfor-loop
Jevon Cochran
Jevon Cochran

Reputation: 1774

adding slideshow of images to page

When I try to add an image slideshow, idr doesn't work.

This is the HTML element:

<img class="main-img" alt="">

This is my Javascript:

window.onload = function() {
    var mainImg = document.querySelector('.main-img');
    let slideshow = [
        '../img/jevon_cochran_pelourinho.jpg',
        '../img/jevon_cochran_quibdo.jpg',
        '../img/me_in_Pernambues.JPG'
    ];
    var index = 0;
    var interval = 2000;
    function slide() {
        mainImg.src = slideshow[i];
        index++;
        if (index >= slideshow.length) {
            index = 0;
        }
    }

    setInterval(slide, interval);
}

Upvotes: 0

Views: 28

Answers (1)

Charith Hettiarachchi
Charith Hettiarachchi

Reputation: 432

In my opinion it will be much easier to use a javaScript library like slick to create an image slide show or you can just use bootstrap carousel.

slick - https://kenwheeler.github.io/slick/

Carousel - https://getbootstrap.com/docs/4.0/components/carousel/

Hope this helps!

Upvotes: 1

Related Questions