JSFiddle - React, Tailwind, and code Playground

by Tan Kucukhas

HTML

<nav>
    <button id="tab1">TAB1</button>
    <button id="tab2">TAB2</button>
    <button id="tab3">TAB3</button>
    <button id="tab4">TAB4</button>
    <button id="tab5">TAB5</button>
</nav>

<div id="wholecontent">
<div class="slideshow">
<section id="one">
<div class="content">
    <div id="page1" class="slideLeft">
        <img src="http://placehold.it/250/b5c752/fff&text=content01+page01" />
    </div>
    <div id="page2" class="slideRight">
        <img src="http://placehold.it/250/b5c752/fff&text=content01+page02" />
    </div>
</div>
<div class="navigation">
    <button name="prvbtn">
        <</button>
            <button name="nxtbtn">></button>
</div>
    </section>
    
    <section id="two">
<div class="content">
    <div id="page1" class="slideLeft">
        <img src="http://placehold.it/250/e5aa3a/fff&text=content02+page01" />
    </div>
    <div id="page2" class="slideRight">
        <img src="http://placehold.it/250/e5aa3a/fff&text=content02+page02" />
    </div>
</div>
<div class="navigation">
    <button name="prvbtn">
        <</button>
            <button name="nxtbtn">></button>
</div>
    </section>
    
    <section id="three">
<div class="content">
    <div id="page1" class="slideLeft">
        <img src="http://placehold.it/250/312d25/fff&text=content03+page01" />
    </div>
    <div id="page2" class="slideRight">
        <img src="http://placehold.it/250/312d25/fff&text=content03+page02" />
    </div>
</div>
<div class="navigation">
    <button name="prvbtn">
        <</button>
            <button name="nxtbtn">></button>
</div>
    </section>
    
    <section id="four">
<div class="content">
    <div id="page1" class="slideLeft">
        <img src="http://placehold.it/250/4f4922/fff&text=content04+page01" />
    </div>
    <div id="page2" class="slideRight">
        <img src="http://placehold.it/250/4f4922/fff&text=content04+page02" />
    </div>
</div>
<div class="navigation">
    <button name="prvbtn">
        <</button>
           ...

CSS

.content {
    clear:both;
    overflow:hidden;
    height:250px;
    width:250px;
}
#page1, #page2 {
}
.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}
@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(0%);
    }
}
@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}
/*
==============================================
slideRight
==============================================
*/
 .slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 500ms;
    -webkit-animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}
@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    100% {
        transform: translateX(0%);
    }
}
@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

#wholecontent
{
    width: 250px;
 /*   overflow:hidden; */
}
.slideshow
{
    transition: all 400ms ease;
    width: 1250px;
}

.slideshow section {
    padding-top: 0px;
    background-repeat: no-repeat;
    float: left;
    width: 250px;
}

JavaScript

var app = {
slideshowContainer: document.querySelector('.slideshow'),
offset: 250,   
allNodes: document.querySelectorAll('section'), document.querySelector('.slideshowNavigation'),
slideshowNavigation: document.querySelector('.slideshowNavigation'),


	slide: function(node){
        getter = node;
		var position = 1, getter = '';
		getter = document.querySelector('.' + getter);
		for(var i = 0; i < this.allNodes.length; i++){
			if(getter === this.allNodes[i]){
				position = i;
				break;
			}
		}
		document.querySelector('.slideshow').style.transform = 'translateX(-' + (position * this.offset) + 'px)';
	},
        
};



//event listeners
var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++){
	buttons[i].addEventListener('click', function(){
		app.slide(this.name);
	}, false);
}


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 buttonDisabler() {
    if (page1.style.display == 'none') {

        nxtbtn.style.display = 'none';
        prvbtn.style.display = 'block';
    }
    if (page2.style.display == 'none') {

        prvbtn.style.display = 'none';
        nxtbtn.style.display = 'block';
    }
}
page2.style.display = 'none'
buttonDisabler();
nxtbtn.addEventListener('click', function () {
    page1.style.display = (page1.style.display == 'none') ? 'block' : 'none';
    page2.style.display = (page2.style.display == 'block') ? 'none' : 'block';
    buttonDisabler();
}, false);

prvbtn.addEventListener('click', function () {
    page1.style.display = (page1.style.display == 'block') ? 'none' : 'block';
    page2.style.display = (page2.style.display == 'none') ? 'block' : 'none';
    buttonDisabler();
}, false);