JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div id="images">
    <img id="image1" src="http://www.lorempixel.com/960/580/sports" />
    <img id="image2" src="http://www.lorempixel.com/960/580/cats" />
    <img id="image3" src="http://www.lorempixel.com/960/580/food" />
    <img id="image4" src="http://www.lorempixel.com/960/580/people" />
</div>
<div id="next" onClick="goToNext()">Next</div>
<div id="previous" onClick="goToPrevious()">Previous</div>

CSS

#previous, #next{
    position: fixed;    
    background: #333;
    color: white;
    width: 50px;
    height: 50px;
    text-align: center;
    cursor: pointer;
}
#next{
    top: 70px;
    right: 10px;
}
#previous{
    top: 10px;
    right: 10px;   
}

JavaScript

var max = 4;

function goToNext() {
    var hash = String(document.location.hash);
    if (hash && hash.indexOf(/image/)) {
        var newh = Number(hash.replace("#image", ""));
        (newh > max - 1) ? window.location.href = "strategy.html" :
        document.location.hash = "#image" + String(newh + 1);
    } else {
        document.location.hash = "image1";
    }
}

function goToPrevious() {
    var hash = String(document.location.hash);
    if (hash && hash.indexOf(/image/)) {
        var newh = Number(hash.replace("#image", ""));
        (newh == 1) ? newh = 5 : void(null);
        document.location.hash = "#image" + String(newh - 1);
    } else {
   var url = window.location.href;

if (url.search("#image") > 0) {
    window.location.href = "strategy.html";
  }    
 }
}