JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="slider">
  <div id="firstSet" style="left:0%;">
    <input type="text" size="40" />
    <button id="searchBtn"  onclick="mapSearchNav(100)">Go</button>
  </div>
  <div id="secondSet" style="left:100%;">
    <label id="flat">
      <input type="radio" name="theme" value="flat" />
      <img src="//placehold.it/200x200.png">
    </label>
    <label id="foil">
      <input type="radio" name="theme" value="foil" />
      <img src="//placehold.it/199x199.png">
    </label>
    <label id="topo">
      <input type="radio" name="theme" value="topo" />
      <img src="//placehold.it/201x201.png">
    </label>
    <button id="backBtn" onclick="mapSearchNav(-100)">Back</button>
  </div>
</div>

CSS

#slider {
  position: relative;
  width: 100%;
  margin: 5px;
}

#firstSet {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: left 0.5s linear;
}

#secondSet {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: left 0.5s linear;
}

label > input {
  /* HIDE RADIO */
  visibility: hidden;
  /* Makes input not-clickable */
  position: absolute;
  /* Remove input from document flow */
}

label > input + img {
  /* IMAGE STYLES */
  cursor: pointer;
  border: 2px solid transparent;
}

label > input:checked + img {
  /* (RADIO CHECKED) IMAGE STYLES */
  border: 2px solid #f00;
}

JavaScript

function mapSearchNav(num) {
  for (var i = 0,cDivs = document.getElementById('slider').childNodes; i < cDivs.length; i++) {
    if (cDivs[i].tagName == "DIV") {
      cDivs[i].style.left = (cDivs[i].style.left.split('%')[0] - num) + "%" ;
    }
  }
}