JSFiddle - React, Tailwind, and code Playground

by thierrymichel

HTML

<div id="partner">
    <div id="slide">
        Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur.
    </div>
</div>

CSS

#partner {
    width:445px;
    height:190px;
    margin:20px;
    background-color:#fff;
    border:1px solid black;
    overflow:hidden;
    position:relative;
}

#slide {
    width:2000px;
    height:170px;
    margin-top:10px;
    background-color:#FF9900;
    position:absolute;
    overflow:hidden;
    left:0;
}

JavaScript

(function($) {
  function mySlide(pos) {
    var x = $('#slide').width() - $('#partner').width();
    var t = 6000 * ( (pos + x) / x);

    $("#slide")
      .css('left', pos)
      .animate(
        {'left': -x},
        t,
        'linear',
        function() {
          mySlide(0);
        }
      );
  }
            
  $("#partner").hover(
    function() {
      $('#slide').stop();
    },
    function() {
      mySlide( $('#slide').position().left );
    }
  );

  mySlide(0);

})(jQuery);