JSFiddle - React, Tailwind, and code Playground

by Jack Violet

HTML

<div id="app">
  <div id="container">
    <div class="block block-01">
      <h1>1</h1>
    </div>
    <div class="block block-02">
      <h1>2</h1>
    </div>
    <div class="block block-01">
      <h1>3</h1>
    </div>
    <div class="block block-02">
      <h1>4</h1>
    </div>
  </div>

  <button id="btnPrev">prev</button>
  <button id="btnNext">next</button>
</div>

CSS

#container {
          position: relative;
          overflow: hidden;
        }

        .block {
          position: absolute;
          display: inline-block;
          width: 100%;
          height: 100%;
          transition: all 1s;
        }

        .block-01 {
          background-color: #99a9bf;
        }

        .block-02 {
          background-color: #d3dce6;
        }

        h1 {
          position: absolute;
          top: 50%;
          width: 100%;
          text-align: center;
          transform: translateY(-50%);
          padding: 0;
          margin: 0;
        }

JavaScript

var config = {
  height: "300px",
  index: 0,
}

var container = document.getElementById("container")
container.style.height = config.height

function getOffSet() {
  var blocks = document.getElementsByClassName("block")
  var offsetWidth = document.getElementById("container").offsetWidth
  for (let index = 0, len = blocks.length; index < len; index++) {
    var s = blocks[index].style
    let translate = offsetWidth * (index - config.index)
    s.transform = s.msTransform = s.webkitTransform = `translateX(${translate}px)`
  }
}

getOffSet()

var blockLength = document.getElementsByClassName("block").length

function prev() {
  pauseTimer()
  if (config.index > 0) {
    config.index--
  } else {
    config.index = blockLength - 1
  }
  getOffSet()
  startTimer()
}

function next() {
  pauseTimer()
  if (config.index < blockLength - 1) {
    config.index++
  } else {
    config.index = 0
  }
  getOffSet()
  startTimer()
}

document.getElementById("btnPrev").onclick = prev
document.getElementById("btnNext").onclick = next

var timer = null

function pauseTimer() {
  if (timer) {
    clearInterval(timer)
  }
}

function startTimer() {
  timer = setInterval(next, 3000)
}

startTimer()