JSFiddle - React, Tailwind, and code Playground

by thekenwheeler

HTML

<div class="holder">
    <div class="viewport">
        <div id="track" class="track">
        
        </div>
    </div>
</div>

<a href="javascript:void(0)" class="prev">Prev</a>
<a href="javascript:void(0)" class="next">Next</a>

CSS

body {
    background: #3498db;
    font-family: Lucida Grande;
    font-size: 18px;
}

.viewport {
    width: 60%;
    margin: auto;
    background: #3498db;
    box-sizing: border-box;
    overflow: hidden;
}

.track {
    position: relative;
    left: 0px;
    top: 0px;
    padding: 10px;
    box-sizing: border-box;
    transition: 500ms all ease;
}

.slide {
    display: inline-block;
    padding: 20px;
    margin-right: 10px;
    box-sizing: border-box;
    text-align: center;
    background: white;
    color: #3498db;
    border: 1px solid white;
}

JavaScript

var dataset, slide, track, viewport, next, prev, current;
dataset = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

function slide(content) {
  var el = document.createElement('div');
  el.className = 'slide';
  el.innerHTML = content;
  return el;
}

function goPrev() {
    if(current > 0) {
    track.style.left = (track.offsetLeft - 100) + (viewport.offsetWidth - 32) + 'px';
    current--;
    }
}

function goNext() {
    if(current < 4) {
    track.style.left = (track.offsetLeft - 100) - (viewport.offsetWidth + 12) + 'px';
    current++;
    }
}

current = 0;

track = document.querySelector('.track');
viewport = document.querySelector('.viewport');
next = document.querySelector('.next');
prev = document.querySelector('.prev');

track.style.width = ((viewport.offsetWidth + 20) / 3) * (dataset.length - 1) + 'px';

for(var i = 0; i < dataset.length; i++) {
   var item = slide(dataset[i]);
   item.style.width = (viewport.offsetWidth - 40) / 3 + 'px';
   track.appendChild(item);
}

next.addEventListener("click", goNext);
prev.addEventListener("click", goPrev);