JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<div id="slider-wrap">
    
    <div id="inner">
        <div class="slider-content" style="background:#99C;">Slide 1</div>
        <div class="slider-content" style="background:#CCC;">Slide 2</div>
        <div class="slider-content" style="background:#555;">Slide 3</div>
        <div class="slider-content" style="background:#777;">Slide 4</div>
    </div>
    
</div>

<a href="" class="left">Left</a> <a href="" class="right">Right</a>

CSS

#slider-wrap {
    width: 402px;
    background: #3CF;
    height: 202px;
    overflow: hidden;
}

#inner {
    width: 2000px;
}

.slider-content {
    float: left;
    width: 400px;
    height: 200px;
    border: 1px solid #000;

JavaScript

var marginLeft = 0;
var newmarginL = 0;
var newmarginR = marginLeft - 402;

$('.right').click(function() {
    $('#inner').animate({
        'margin-left': newmarginR + 'px'
    });
    newmarginR = newmarginR - 402;
    newmarginL = newmarginR + 804;
    return false;
});

$('.left').click(function() {
    $('#inner').animate({
        'margin-left': newmarginL + 'px'
    });
    newmarginL = newmarginL + 402;
    newmarginR = newmarginL - 804;
    return false;
});