JS native handwritten carousel diagram

JS native handwritten carousel diagram

Upload code

JS

<script>
    var ims = document.getElementsByClassName('im');
    var z = document.getElementsByClassName('z')[0];
    var s = document.getElementsByClassName('s')[0];

    var index = 0;
    s.onclick = function () {
    
    
        index++;
        if (index > ims.length - 1) {
    
    
            index = 0;
        }
        for (var i = 0; i < ims.length; i++) {
    
    
            ims[i].style.display = 'none'
        }
        ims[index].style.display = 'block'
    }

    z.onclick = function () {
    
    
        index--;

        if (index < 0) {
    
    
            index = ims.length - 1;
        }
        for (var i = 0; i < ims.length; i++) {
    
    
            ims[i].style.display = 'none'
        }
        ims[index].style.display = 'block'
    }


</script>

HTML

<div class="box">
    <ul>
        <li><img src="01%20(1).jpg" class="im"></li>
        <li><img src="01%20(2).jpg" class="im"></li>
        <li><img src="01%20(3).jpg" class="im"></li>
        <li><img src="01%20(4).jpg" class="im"></li>
    </ul>
    <span class="z">&lt;</span>
    <span class="s">&gt;</span>
</div>

CSS

 <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        .box {
    
    
            width: 500px;
            height: 500px;
            border: 2px solid fuchsia;
            margin: 50px auto;
            position: relative;
        }

        .box img {
    
    
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        li {
    
    
            list-style: none;

        }

        img:first-child {
    
    
            display: block;
        }

        .z {
    
    
            width: 20px;
            height: 60px;
            line-height: 60px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .s {
    
    
            width: 20px;
            height: 60px;
            line-height: 60px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
    </style>