JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<div id="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

CSS

#container {
    width: 300px;
    height: 300px;
    border: 1px solid #999;
    overflow: hidden;
}

#container ul {
    width: 900px;
}

#container ul li {
    float: left;
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 280px;
    font-size: 16px;
}

JavaScript

var slide = $('#container li'), 
    slideCount = slide.length, 
    slideWidth = slide.width(), 
    container = $('#container ul'), 
    speed = 300;

slide.click(function(){
    if(container.css('margin-left') === (-(slideCount - 1) * slideWidth) + 'px'){
        container.animate({
            marginLeft: 0
        }, (slideCount - 1) * speed);
    } else {
        container.animate({
            marginLeft: '-=' + slideWidth + 'px'
        }, speed);
    }
});