JSFiddle - React, Tailwind, and code Playground

by shehovn

HTML

<div id="temp">
    <div id="container">
        <div id="move_left"><button id="right">&laquo;</button></div>
        <div id="move_right"><button id="left">&raquo;</button></div>
        <div id="slider">
            <div id="block1">1</div>    
            <div id="block2">2</div>
            <div id="block1">3</div>    
            <div id="block2">4</div> 
            <div id="block1">5</div>    
            <div id="block2">6</div>
            <div id="block1">7</div>    
            <div id="block2">8</div>
        </div>
    </div>
</div>
<div id="temp">
    <div id="container">
        <div id="move_left"><button id="right">&laquo;</button></div>
        <div id="move_right"><button id="left">&raquo;</button></div>
        <div id="slider">
            <div id="block1">9</div>    
            <div id="block2">10</div>
            <div id="block1">11</div>    
            <div id="block2">12</div> 
            <div id="block1">13</div>    
            <div id="block2">14</div>
            <div id="block1">15</div>    
            <div id="block2">16</div>
        </div>
    </div>
</div>

CSS

#temp{
height: 300px;
}

#container{
    width: 600px;
    height: 150px;
    background:#CDFAA8;
    overflow:hidden;
    position:absolute;
    left: 13px;
    }

#slider{
    width: 800px;
    height: 150px;
    background:#063;
    position:absolute;
    left: 0px;
}

#block1{
    width: 100px;
    height: 150px;
    background:#067;
    float: left;
}

#block2{
    width: 100px;
    height: 150px;
    background:#079;
    float: left;
}

#move_right{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    right:0px;
    z-index: 200;
    opacity: 0.2;
}

#move_left{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    left:0px;
    z-index: 200;
    opacity: 0.2;
}

JavaScript

(function($) {
    $('#temp #container').each(function(){
        var slider = $(this).find('#slider'),
        parent = $(this),
        step = 500,
        left = parseInt(slider.css('left'), 10),
        max = parent.width() - slider.width(),
        min = 0;
    
    parent.find("#left").click(function() {
        if (left > max) {
            var newLeft = left - step;
            left = (newLeft>max) ? newLeft : max;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });

    parent.find("#right").click(function() {
        if (left < 0) {
            var newLeft = left + step;
            left = (newLeft<min) ? newLeft : min;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });
});
})(jQuery);