JSFiddle - React, Tailwind, and code Playground

by Tan Kucukhas

HTML

<div class="contentContainer">
    <div id="wrapper">
        <div id="page1">
            <img src="http://placehold.it/250/CFCFC4/000" />
        </div>
        <div id="page2">
            <img src="http://placehold.it/250/C23B22/fff" />
        </div>
        <div id="wrapper"></div>
        <div class="navigation">
            <button name="prvbtn">previous</button>
            <button name="nxtbtn">next</button>
        </div>

CSS

#wrapper {
    width:500px;
    position: relative;
}
.contentContainer {
    overflow: hidden;
    width:250px;
}
#page1, #page2 {
    float:left;
	transition: all 400ms ease;
    position: relative;
}
.slideRight {
    transform: translateX(-100%);
}
.slideLeft {
    transform: translateyx(100%);
}

JavaScript

var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var nxtbtn = document.querySelector('button[name="nxtbtn"]');
var prvbtn = document.querySelector('button[name="prvbtn"]');

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function buttonDisabler() {
    if (hasClass(page2, 'slideRight') === true) {
        nxtbtn.style.display = 'none';
        prvbtn.style.display = 'block';
    }
    if (hasClass(page2, 'slideLeft') === true) {
        nxtbtn.style.display = 'block';
        prvbtn.style.display = 'none';
    }
}

prvbtn.style.display = 'none';
nxtbtn.addEventListener('click', function () {
    page1.className = "slideRight";
    page2.className = "slideRight";
    buttonDisabler();
}, false);


prvbtn.addEventListener('click', function () {
    page1.className = "slideLeft";
    page2.className = "slideLeft";
    buttonDisabler();
}, false);