JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<div id='challengeTwoImageJavascript' class='sectionChallengeCarouselImage'>
    <img id='imgj1' imgn='1' class='carouselImage carouselImageJavascriptActive' src='http://placehold.it/100x100.jpg'/>
    <img id='imgj2' imgn='2' class='carouselImage' src='http://placehold.it/100x100.jpg'/>
    <img id='imgj3' imgn='3' class='carouselImage' src='http://placehold.it/100x100.jpg'/>
    <img id='imgj4' imgn='4'class='carouselImage' src='http://placehold.it/100x100.jpg'/>
</div>

JavaScript

$('.carouselImageJavascriptActive').removeClass('carouselImageJavascriptActive');
$(this).addClass('carouselImageJavascriptActive');
var imgs=$(this).attr('.carouselImage')
var self = $(this);
var myImage = new Array();
var x=0;

myImage[0]='img/image1.jpg';
myImage[1]='img/image2.jpg';
myImage[2]='img/image3.jpg';
myImage[3]='img/image4.jpg';

setTimeout(function() {

    var img = document.getElementById('.carouselImageJavascriptActive');
    img.src = myImage[x];
    x++;

    if(x >= myImage.length){
        x = 0;
    } 
},2000);