JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<div class="container">
    <ul>
        <li>Lorem ipsum dolor sit amet</li><!--
     --><li>Consectetur adipiscing elit</li><!--
     --><li>Praesent commodo nisi eu sapien</li><!--
     --><li>Fusce tempor, sapien vitae tempus dapibus</li><!--
     --><li>Aenean pulvinar urna vel tortor</li><!--
     --><li>Proin turpis tellus, fringilla eget molestie nec</li><!--
     --><li>Etiam sed varius lacus</li><!--
     --><li>Aenean facilisis tincidunt massa luctus feugiat</li><!--
     --><li>Etiam suscipit vel erat sit amet fringilla</li><!--
     --><li>Nulla sit amet eros mauris.</li>
    </ul>
</div>

CSS

body {
    margin: 0;
}
ul {
    overflow: hidden;
    white-space: nowrap;
    margin: 2%;
    padding: 0;
}
li {
    display:inline-block;
    border:1px solid #ccc;
    padding:10px;
    margin-right: 2%;
    width:49%;
    list-style-type:none;
    box-sizing: border-box;
    white-space: normal;
    vertical-align: top;
    text-align: center;
}

JavaScript

$.fn.scrollList = function (delay) {
    delay = delay || 2000;
    var animateList = function ($list) {
        //get first child
        var $first = $list.children('li:first');
        var width = $first.outerWidth(true);
        //animate first two off the screen
        $first.animate({
            'margin-left': $list.width() * -1
        },
        // on animation complete
        function () {
            //reset and move to the end of the list
            $(this).css('margin-left', 0).add($(this).next()).appendTo($list);
            //start again after delay
            setTimeout(function () {
                animateList($list)
            }, delay);
        });
    };

    return this.each(function () {
        var $that = $(this)
        setTimeout(function () {
            animateList($that);
        }, delay);
    });

};

$('.container ul').scrollList();