JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="outer-container">
    <div class="inner-container">
        <div id="news-01" class="block"></div>
        <div id="news-02" class="block"></div>
        <div id="news-03" class="block"></div>
    </div>
</div>


<div class="left">LEFT</div>
<div class="right">RIGHT</div>

CSS

.outer-container {
    position: relative;
    width: 100%; height: auto;
    top: 0; left: 0;
    overflow: hidden !important;
    background: aqua;
}

.inner-container {
    position: relative;
    width: 4000px; height: auto;
    top: 0; left: 50%;
    margin-left: -100px;
    background-color: red;
}

.block {
    position: relative;
    width: 200px; height: 200px;
    display: inline-block;
    margin-right: 5px;
    background: blue;
}

.right {
    position: fixed;
    bottom: 0; left: 50px;
    cursor: pointer;
}

.left {
    position: fixed;
    bottom: 0; left: 0;
    cursor: pointer;
}

JavaScript

$(".right").click(function () {
    var sev = $("#news-02").index() + 1,
        test = 250,
        lest = test * sev;
    $('.inner-container').animate({
        'marginLeft': "-=" + lest + "px"
    });
});

$(".left").click(function () {
    $('.inner-container').animate({
        'marginLeft': "+=210px"
    });
});