JSFiddle - React, Tailwind, and code Playground

HTML

<div id="middle">
    <div id="vvvmiddle">
        <div id="sipka" onclick="change('left')">
            <div id="sipkatext">
                <</div>
            </div>
            <div id="sipka2" onclick="change('right')">
                <div id="sipkatext2">></div>
            </div>
    </div>
</div>

CSS

#middle {
    width:1262px;
    height:550px;
    background-color: white;
    margin-left: -7px;
}
#vvvmiddle {
    width:700;
    height:400;
    margin: 20px 0px 0px 310px;
    float:left;
    background-repeat: no-repeat;
}
#sipka {
    width:40;
    height:40;
    border-radius: 100px;
    background-color: #DCDCDC;
    float:right;
    margin: 450px 410px 0px 0px;
    cursor: pointer;
}
#sipkatext {
    font-family: Impact;
    color: white;
    font-size: 30px;
    padding-left: 10px;
    padding-top: 1px;
}
#sipkaurl {
    text-decoration: none;
}
#sipka:hover {
    background-color: #3399FF;
}
#sipka2:hover {
    background-color: #3399FF;
}
#sipka2 {
    width:40;
    height:40;
    border-radius: 100px;
    background-color: #DCDCDC;
    float:right;
    margin: 450px -100px 0px 0px;
    cursor: pointer;
}
#sipkatext2 {
    font-family: Impact;
    color: white;
    font-size: 30px;
    padding-left: 13px;
    padding-top: 1px;
}

JavaScript

var img = ["creation_days_numbers_1-69px.png", "creation_days_numbers_2-69px.png", "creation_days_numbers_3-69px.png"];
var len = img.length;
var url = 'http://www.mahoningvalleylanes.com/wp-content/uploads/2018/08/spotlight-image-of-puppy-dog-southeastern-guide-dogs.jpg';
var current=0;

var middle = document.getElementById("vvvmiddle");
middle.style.backgroundImage = "url(" + url + img[current] + ")";

function change(dir){
    if(dir == "right" && current < len-1){
		current++;
		middle.style.backgroundImage = "url(" + url + img[current] + ")";
    } else if(dir == "left" && current > 0){
    	current--;
		middle.style.backgroundImage = "url(" + url + img[current] + ")";
    }
}