JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="folio" id="folio">

<div class="win0" id="win">

<div class="block a"></div><div class="block b"></div><div class="block c"></div><div class="block d"></div>
<div class="block e"></div><div class="block f"></div><div class="block g"></div><div class="block h"></div>
<div class="block a"></div><div class="block b"></div><div class="block c"></div><div class="block d"></div>

</div>

<a class="prev" onclick="moveRight()">&#10094;</a>
<a class="next" onclick="moveLeft()">&#10095;</a>





</div>

</div>

<div id="mydiv2" class="mydiv2"></div>

CSS

.containr {max-width:800px;margin:auto;}
.folio {position:relative;width:100%;height:300px;background-color:#999;overflow:hidden;}
#win {position:absolute;top:0;bottom:0;min-width:3600px;}

.win0 {left: 0px;transition: left 1s ease;}
.win1 {left: -300px;transition: left 1s ease;}
.win2 {left: -600px;transition: left 1s ease;}
.win3 {left: -900px;transition: left 1s ease;}
.win4 {left: -1200px;transition: left 1s ease;}
.win5 {left: -1500px;transition: left 1s ease;}
.win6 {left: -1800px;transition: left 1s ease;}
.win7 {left: -2100px;transition: left 1s ease;}
.win8 {left: -2400px;transition: left 1s ease;}
.win9 {left: -2700px;transition: left 1s ease;}
.win10 {left: -3000px;transition: left 1s ease;}
.win11 {left: -3300px;transition: left 1s ease;}
.win12 {left: -3600px;transition: left 1s ease;}


.block {width:300px;height:300px;float:left;}
.a {background-color:#698C00;}
.b {background-color:#0036D9}
.c {background-color:#D93600;}
.d {background-color:#B2B200;}
.e {background-color:#A300D9;}
.f {background-color:#00FF40;}
.g {background-color:#FF9326;}
.h {background-color:#0085B2;}

  /* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: #999;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #000;
}

JavaScript

var win = document.getElementById("win");
var number = Number(0);


function moveLeft() { 
var pos = document.getElementById("folio").clientWidth;

if (pos <= 599) {var inc = (number + 1);
if (inc > 10) {inc = 11}}
if (pos > 599) {var inc = (number + 2);
if (inc > 9) {inc = 10}}
if (pos > 899) {var inc = (number + 3);
if (inc > 8) {inc = 9}}
if (pos > 1199) {var inc = (number + 4);
if (inc > 7) {inc = 8}}

if (inc < 0) {inc = 0}

number = inc;
win.className = "win" + inc;

}


function moveRight() { 
var pos = document.getElementById("folio").clientWidth;

if (pos <= 599) {var inc = (number - 1);
if (inc > 10) {inc = 11}}
if (pos > 599) {var inc = (number - 2);
if (inc > 9) {inc = 10}}
if (pos > 899) {var inc = (number - 3);
if (inc > 8) {inc = 9}}
if (pos > 1199) {var inc = (number - 4);
if (inc > 7) {inc = 8}}

if (inc < 0) {inc = 0}

number = inc;
win.className = "win" + inc;

}





function getwidth() {

var var1 = document.getElementById("folio").clientWidth;

document.getElementById("mydiv2").innerText = var1 + "px";

}

window.onresize = getwidth;