JSFiddle - React, Tailwind, and code Playground

by Anik Islam Abhi

HTML

<header>
    
<h1>Title</h1>

</header>
<nav>
    <ul>
        <li></li>
    </ul>
</nav>
<div>
    
<h1>My Web Page</h1>

    <p id="demo">A Paragraph</p>
    <section>
        <button type="button" onclick="myFunction()">Try it</button>
        <img onchange="changeImage()" id="imgTrans" src="images/cake.jpg">
    </section>
</div>
<footer>
    
<h6></h6>

</footer>

JavaScript

function slide() {
    console.log("Slide started");
    var picNum = 1;
    /* var currMarg = 0,*/
    contStyle = document.getElementById('imgTrans');
    setInterval(function () {
        /*currMarg = currMarg == 1800 ? 0 : currMarg + 600;
    contStyle.marginLeft = '-' + currMarg + 'px';*/
        if (picNum === 4) {
            picNum = 1;
        } else {
            console.log(picNum);
            switch (picNum) {
                case 1:
                    contStyle.src = "images/mints.jpg";
                    picNum++;
                    break;
                case 2:
                    contStyle.src = "images/mints.jpg";
                    picNum++;
                    break;
                case 3:
                    contStyle.src = "images/mints.jpg";
                    picNum++;
                    break;
                case 4:
                    contStyle.src = "images/mints.jpg";
                    picNum++;
                    break;
                default:
                    contStyle.src = "images/mints.jpg";
            }
        }
    }, 3000);
}
slide();