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 sliderWidth = $('#slider-wrap').width();
var newmarginR = marginLeft - sliderWidth;

$('.left').hide();

$('.right').click(function() {
    $('.left').show();
    $('#inner').animate({
        'margin-left': newmarginR + 'px'
    });
    
    if (newmarginR == -1206) {
        $(this).hide();
    }

    newmarginR = newmarginR - sliderWidth;
    newmarginL = newmarginR + (sliderWidth * 2);
    return false;
});

$('.left').click(function() {
    $('.right').show();
    $('#inner').animate({
        'margin-left': newmarginL + 'px'
    });

    //test if left-position is beyond
    if (newmarginL == 0) {
        $(this).hide();
    }

    newmarginL = newmarginL + sliderWidth;
    newmarginR = newmarginL - (sliderWidth * 2);
    return false;
});