JSFiddle - React, Tailwind, and code Playground

by DohanKwon

HTML

<div id="slider">
    <ul id="slider-list">
        <li>
            <img src="http://placedog.com/600/200" />
        </li>
        <li>
            <img src="http://placekitten.com/600/200" />
        </li>
        <li>
            <img src="http://lorempixel.com/600/200/" />
        </li>
    </ul>
</div>
<div id="next">Next</div>

CSS

#slider {
    height: 200px;
    width: 600px;
    overflow: hidden;
}
#slider ul {
    width: 1800px;
    position: relative;
}
#slider ul li {
    float: left;
    position: relative;
    left: 0;
}
#next {
    cursor: pointer;
}

JavaScript

var s_wrap = document.getElementById('slider');
var s_list = document.getElementById('slider-list');
var li_items = s_list.getElementsByTagName("li");
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var left;

function move() {
    var amount = 600;
    var limit = 1800 - amount;
    if (s_list.style.left === '') {
        left = 0;
    } else {
        left = parseInt(s_list.style.left, 10);
    }
    if (Math.abs(left) < limit) {
        s_list.style.left = left - amount + 'px';
    } else {
        s_list.style.left = '0px';
    }
}

next.onclick = move;