JSFiddle - React, Tailwind, and code Playground

by brianeoneill

HTML

<script src="https://raw.github.com/inuyaksa/jquery.nicescroll/master/jquery.nicescroll.js"></script>

<div class="view-pane-outer">
    <div class="view-pane-inner">
        <div class="ul-container">
             <ul class="list">
                <li>First List 1</li>
                <li>First List 2</li>
                <li>First List 3</li>
                <li>First List 4</li>
                <li>First List 5</li>
            </ul>
        </div>
        <div class="ul-container">
           <ul class="list">
                <li>Second List 1</li>
                <li>Second List 2</li>
                <li>Second List 3</li>
                <li>Second List 4</li>
                <li>Second List 5</li>
            </ul>
        </div>
    </div><!-- view-pane-inner -->
</div><!-- view-pane-outer -->

CSS

.view-pane-outer {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 1px solid #333;
    position: relative;
}
.view-pane-inner {
    width: 400px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.ul-container {
    float: left;
    width: 200px;
    height: 200px;
}
.list {
    list-style: none;
    padding: 10px 0 0 0;
    text-align: center;
}
.list li {
    margin: 0 20px 15px 15px;
    padding: 25px 0;
    background: #eee;
    border: 1px solid #666;
}

JavaScript

$(document).ready(function(){
    $('.ul-container').niceScroll();
    
    setInterval(function(){
        $('.view-pane-inner').animate({'left', '-=200px'});
    },3000);
});