js slide

$(function () {
    const sliderData=[
        {
            img:"../images/1.jpg",
            name:"",
            desc:"Earth's mightiest heroes must come together and learn to fight as a team if they are to stop the mischievous Loki and his alien army from enslaving humanity.",
        },
        {
            img:"../images/2.jpg",
            name:"",
            desc:"Earth's mightiest heroes must come together and learn to fight as a team if they are to stop the mischievous Loki and his alien army from enslaving humanity.",
        }
    ];
    for(var i=0;i<sliderData.length;i++){
        var slider=document.querySelector('.slider');
        var img=sliderData[i].img;
        var name=sliderData[i].name;
        var desc=sliderData[i].desc;
        var slideData=
            // '<div class="slide" data-slide="slide-${i}">' +
            // '   <div class="slide-image"><img src="${img}" alt=""></div>' +
            // '   <div class="slide-caption">' +
            // '       <div class="slide-caption-content">' +
            // '            <div class="title-bg">' +
            // '               <h1>${name}</h1>'+
            // '               <p>${desc}</p>'+
            // '            </div>'+
            // '       </div>'+
            // '   </div>'+
            // '</div>';
            '<div class="slide" data-slide="slide-'+i+'">' +
            '   <div class="slide-image"><img src="'+img+'" alt=""></div>' +
            '   <div class="slide-caption">' +
            '       <div class="slide-caption-content">' +
            '            <div class="title-bg">' +
            '               <h1>'+name+'</h1>'+
            '               <p>'+desc+'</p>'+
            '            </div>'+
            '       </div>'+
            '   </div>'+
            '</div>';
        slider.innerHTML += slideData;
    }
    var slides=document.querySelectorAll(".slide");
    var currentSlide=0;
    slides[currentSlide]=0;
    slides[currentSlide].classList.add("visible");
    var slideInterval=setInterval(function () {
        slides[currentSlide].classList.remove("visible");
        currentSlide=(currentSlide+1)%slides.length;
        slides[currentSlide].classList.add("visible");
    },5000);
});