JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<div id="slider-wrapper">
<div id="slider-inside">
    <img src="http://placehold.it/760x340" />
    <img src="http://placehold.it/760x340" />
    <img src="http://placehold.it/760x340" />
</div>
<div class="left-arrow" onclick="moveSlider('left')"></div>
<div class="right-arrow" onclick="moveSlider('right')"></div>
</div>
<!-- <div id="dots">
    <ul>
        <li><a href="javascript:;" onclick="moveSlider(0)"></a></li>
        <li><a href="javascript:;" onclick="moveSlider(-760)"></a></li>
            <li><a href="javascript:;" onclick="moveSlider(-1520)"></a></li>
    </ul>
</div> -->

CSS

#slider-wrapper {
    width: 760px;
    height: 340px;
    border: 10px solid rgba(0,0,0,0.5);
    overflow: hidden;
}

.left-arrow, .right-arrow {
    position: relative;
    top: -340px;
    left: 0;
    z-index: 99;
    width:53px;
    height: 340px;
    background: rgba(0,0,0,0.5);
    opacity: 0;
}

.right-arrow {
    top: -680px;
    left: 707px;
    z-index: 100;
}

.left-arrow:hover, .right-arrow:hover {
    opacity: 1;
}

#slider-inside {
    position: relative;
    top:0;
    left: 0;
    width: 2280px;
    height: 340px;
    background: red;
    -webkit-transition: left 1s ease;
}

#slider-inside img {
    float:left;
    width: 760px;
    height: 340px;
    background:#333;
    outline:1px solid black;
}

#dots ul{
    list-style: none;
    width: 100px;
    height: 25px;
    margin:0 auto;
}

#dots ul li a{
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    background: #333;
    border-radius: 10px;
}

JavaScript

var amount = 0;

function moveSlider(direction) {
    var slider = document.getElementById('slider-inside');
    if (direction == 'right') {
        if (amount == -1520) {
            amount = 0;
        } else {
            amount -= 760;
        }
    } else if (direction == 'left') {
        if (amount == 0) {
            amount = -1520;
        } else {
            amount += 760;
        }
    } else {
        amount = direction;
    }
    slider.style.left = amount + 'px';
}