JSFiddle - React, Tailwind, and code Playground

by evgeniel

HTML

<div class="block">
    <img src="https://cloclo39.cloud.mail.ru/thumb/xw1/banner/b1.jpg">
    <span class="bLeft" onclick="bLeft ()"></span>
    <span class="bRight" onclick="bRight ()"></span>
</div>

CSS

.block {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 475px;
        height: 215px;
      }

      .block img {
        position: absolute;
      }

      .bLeft { 
        
        background-image: url(https://cloclo39.cloud.mail.ru/thumb/xw1/banner/bleft.jpg);
        background-color: #000000;
        width: 38px;
        height: 38px;
        position: absolute;
        left: 15px;
        bottom: 15px;
      }

      .bRight {
        background-image: url(https://cloclo39.cloud.mail.ru/thumb/xw1/banner/bright.jpg);
        background-color: #000000;
        width: 38px;
        height: 38px;
        position: absolute;
        right: 15px;
        bottom: 15px;
      }

JavaScript

var num = 1;

      function bLeft () {
        num--;
        if (num < 1) num = 3;
        document.images [0].src = 'https://cloclo39.cloud.mail.ru/thumb/xw1/banner/b' + num + '.jpg';
      }

      function bRight () {
        num++;
        if (num > 3) num = 1;
        document.images [0].src = 'https://cloclo39.cloud.mail.ru/thumb/xw1/banner/b' + num + '.jpg';
      }

      window.onload=function() {
        setTimeout(timeS, 5000);
        function timeS () {
        num++;
        if (num > 3) num = 1;
        document.images [0].src = 'https://cloclo39.cloud.mail.ru/thumb/xw1/banner/b' + num + '.jpg';
        }
      }