JSFiddle - React, Tailwind, and code Playground

by cadence96

HTML

<a id="left">Left</a>
<a id="right">Right</a>
<ul>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
    </li>
</ul>

CSS

ul{position:absolute; top:20px; left:0}
li{width:100px; float:left}
img{width:100px; height:100px}
#right{margin-left:430px}

JavaScript

var currentPosition = [];

// store some values in an array
function slide() {
    for (var j = 0; j < 5; j++) {
        var positions = 100 * j;
        currentPosition.push(positions);
    }
    moveIt(j -1);
}

function moveIt(j) {
    // on click animate to the left
    $(document).on('click', '#left', function() {
        $('ul:not(:eq(3))').animate({
            'left': currentPosition[j] + 'px'
        });
    })
}

slide();