JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div id="outerContainer">
            <div id="imageScroller">
                <div id="viewer">
                    <img class="wrapper" id="apple" src="http://freedxffile.com/sites/default/files/vector-images/t1-7-Airplane.png" alt="Apple">
                 
                </div>
            </div>
        </div>

CSS

body
{
    overflow:hidden;}
.wrapper
{height:60px;
    margin-left:-300px;
}

JavaScript

$(function() {
    //create new container for images
    $("<div>").attr("id", "container").css({
        position: "absolute"
    }).width($(".wrapper").length * 0).height(60).appendTo("div#viewer");
    //add image to container
        $(".wrapper").appendTo("div#container");
  //  var duration = $(".wrapper").length * 10000;
    var duration = 10000;
    //store speed for later (distance / time)
    var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
    //set direction
    var direction = "ltr";

    //animator function
    var animator = function(el, time, dir) {
        //which direction to scroll
        if (dir == "rtl") {
            //add direction class
            el.removeClass("ltr").addClass("rtl");

            //animate the el
            el.animate({
                left: "-" + el.width() + "px"
            }, time, "linear", function() {
                //reset container position
                $(this).css({
                    left: $("div#imageScroller").width(),
                    right: ""
                });
                //restart animation
                animator($(this), duration, "rtl");
            });
        } else {
            //add direction class
            el.removeClass("rtl").addClass("ltr");
            //animate the el
            el.animate({
                left: $("div#viewer").width() + "px"
            }, time, "linear", function() {
                //reset container position
                $(this).css({
                    left: 0 - $("div#container").width()
                });
                //restart animation
                animator($(this), duration, "ltr");
            });
        }
    }
    //start animation
    animator($("div#container"), duration, direction);
});