JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div id="carousel">
    <div id="viewport">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>

<div onclick="carou('right')" id="back">Back</div>
<div onclick="carou('left')" id="next">Next</div>

<div id="debug"></div>

CSS

#carousel {
    width: 300px;
    height: 75px;
    overflow:hidden;
    position: relative;
}

#viewport {
 width: 1500px;   
    position: absolute;
    left: 0;
    top: 0;
}

#viewport div {
 float: left; 
width: 150px;
 height:75px;   
}

JavaScript

var debug = document.getElementById('debug');
var left;
var carou = function(dir){
    var viewport = document.getElementById('viewport');
    var amount = 150 * 2;
    var limit = 1500 - 300;
    if(viewport.style.left === ''){
        left = 0;              
    } else {
        left = parseInt(viewport.style.left, 10);                
    }
    if(Math.abs(left) < limit){
        if(dir === 'left'){
            viewport.style.left = left - amount + 'px';
        } else {
            viewport.style.left = left + amount + 'px';
        }
    }
}

document.getElementById('next').onclick = carou('left');
document.getElementById('back').onclick = carou('right');



/*
var getComputedStyle = function() {
    var func = null;
    if (document.defaultView && document.defaultView.getComputedStyle) {
        func = document.defaultView.getComputedStyle;
    } else if (typeof(document.body.currentStyle) !== "undefined") {
        func = function(element, anything) {
            return element["currentStyle"];
        };
    }

    return function(element, style) {
        return func(element, null)[style];
    }
}();
*/