JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="main" class="main">
    <div id="bloc-bg" class="bloc-bg">
        <div id="bloc-img" class="bloc-img"></div>
        <div class="bloc-buttons">
            <button class="btn" id="button1">&lt;-</button>
            <button class="btn" id="button2">-&gt;</button>
        </div>
    </div>
</div>

CSS

.bloc-img {
    background-color: red;
    height: 100px;
    margin: 0 auto;
    width: 100px;
}
.main {
    text-align: center;
}
.bloc-bg {
    height: 100px;
    margin: 0 auto;
    width: 100px;
}

JavaScript

var dataSource = [];

var blocBgWidth = $("#bloc-bg").width();
var buttonClicked = false;
init();

function init() {
    fillDataSource();
    if (dataSource[0] !== undefined) {
        $("#bloc-img").html(dataSource[0].name);
    }
}

function fillDataSource() {
    var newData = [{
        "name": "name1",
        "id": 1
    }, {
        "name": "name2",
        "id": 2
    }, {
        "name": "name3",
        "id": 3
    }, {
        "name": "name4",
        "id": 4
    }];
    newData.forEach(function (entry) {
        dataSource.push(entry);
    });
}

function next(btn) {
    console.log(dataSource.length)

    if (btn == "button1") {
        console.log("ko" + dataSource[0].id)
    } else if (btn == "button2") {
        console.log("ok" + dataSource[0].id)
    }
    dataSource.splice(0, 1);
    $("#bloc-img").html(dataSource[0].name).css({
        "margin-left": "0",
            "opacity": "1"
    });
    buttonClicked = false;
    if (dataSource.length <= 5) {
        fillDataSource();
    }
}
$("#button1, #button2").click(function () {
    if (!buttonClicked) {
        var buttonId = this.id;
        buttonClicked = true;
        var operator = "+";
        if (buttonId == "button1") {
            operator = "-";
        }
        $("#bloc-img").animate({
            marginLeft: operator + blocBgWidth + "px",
            opacity: "0"
        }, 500, function () {
            next(buttonId);
        });
    }
})