JSFiddle - React, Tailwind, and code Playground

by Aleksey Nemiro

HTML

<div id="mainDiv">
      <div id="backSlide">
        <img id="img" alt="image" width="750" />
        <div id="ind">1</div>
      </div>
      <a href="#" id="left">Left</a>
      <a href="#" id="right">Right</a>
    </div>

CSS

body{
        background-color: #111;
      }
      footer{
        height: 100px;
        margin: auto;
        width: 1000px;
      }
      #mainDiv{
        border: 1px solid #aaa;
        border-radius: 6px;
        background-color: #000;
        height: 600px;
        margin: auto;
        padding-top: 100px;
        width: 1000px;
      }
      #backSlide{
        height: 500px;
        margin: auto;
        width: 800px;
      }
      #left{
        display: block;
        margin-left: 10px;
        margin-top: 20px;
        float: left;
      }
      #right{
        display: block;
        float: right;
        margin-right: 10px;
        margin-top: 20px;
      }
      #ind{
        border: 1px solid #fff;
        background-color: #111;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        margin: auto;
        margin-top: 20px;
        font-size: 50px;
        text-align: center;
        height: 60px;
        width: 60px;
      }

JavaScript

var images = ["http://img-1.photosight.ru/d80/5779136_large.jpg", "http://img-6.photosight.ru/a09/5573871_large.jpg", "http://img-7.photosight.ru/985/5566262_large.jpg"];

var img = document.getElementById("img");
img.setAttribute("src",images[0]);

document.getElementById("left").onclick = function(){
  goLeft(); 
  return false;
};

document.getElementById("right").onclick = function(){
  goRight(); 
  return false;
};

var n = 1;

function goRight(){
  if (n != 3){
    n++;
  } else {
    n = 1;
  }
  img.setAttribute("src",images[n - 1]);
  document.getElementById("ind").innerHTML = n;
}

function goLeft(){
  if (n != 1){
    n--;
  } else {
    n = 3;
  }
  img.setAttribute("src",images[n - 1]);
  document.getElementById("ind").innerHTML = n;
}