JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="http://melody.kcdtest.com/core/themes/lucy/js/facebox.js"></script>
<link rel="stylesheet" href="http://melody.kcdtest.com/core/themes/lucy/css/facebox.css">
<div id="page">
<div id="scroller" style="width: 550px; height: 400px; margin: 0 auto;">
    <div class="innerScrollArea">
        <ul>
            <li><a href="http://placehold.it/650x250" rel="facebox"><img src="http://placehold.it/350x150" /></a></li>
                 <li><a href="http://placehold.it/650x250" rel="facebox"><img src="http://placehold.it/350x150" /></a></li>
                <li><a href="http://placehold.it/650x250" rel="facebox"><img src="http://placehold.it/350x150" /></a></li>
                 <li><a href="http://placehold.it/650x250" rel="facebox"><img src="http://placehold.it/350x150" /></a></li>
                 <li><a href="http://placehold.it/650x250" rel="facebox"><img src="http://placehold.it/350x150" /></a></li>
        </ul>
    </div>
</div>
</div>

CSS

#page{
    width:40em;
}

img {
     
      max-width:100%;
  }

#scroller {
        position: relative;
    }
    #scroller .innerScrollArea {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    #scroller ul {
        padding: 0;
        margin: 0;
        position: relative;
    }
    #scroller li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: absolute;
    margin-right:10px
    }

JavaScript

$(function(){
        var scroller = $('#scroller div.innerScrollArea');
        var scrollerContent = scroller.children('ul');
        scrollerContent.children().clone().appendTo(scrollerContent);
        var curX = 0;
        scrollerContent.children().each(function(){
            var $this = $(this);
            $this.css('left', curX);
            curX += $this.outerWidth(true);
        });
        var fullW = curX / 2;
        var viewportW = scroller.width();

        // Scrolling speed management
        var controller = {curSpeed:0, fullSpeed:2};
        var $controller = $(controller);
        var tweenToNewSpeed = function(newSpeed, duration)
        {
            if (duration === undefined)
                duration = 600;
            $controller.stop(true).animate({curSpeed:newSpeed}, duration);
        };

        // Pause on hover
        scroller.hover(function(){
            tweenToNewSpeed(0);
        }, function(){
            tweenToNewSpeed(controller.fullSpeed);
        });
        
        // Stop on click
        scroller.click(function(){
            tweenToNewSpeed(0);
             scroller.$('li a[rel*=facebox]').facebox();

             });

        // Scrolling management; start the automatical scrolling
        var doScroll = function()
        {
            var curX = scroller.scrollLeft();
            var newX = curX + controller.curSpeed;
            if (newX > fullW*2 - viewportW)
                newX -= fullW;
            scroller.scrollLeft(newX);
        };
        setInterval(doScroll, 20);
        tweenToNewSpeed(controller.fullSpeed);
   
    });