Pfthb

The following code is meant to scroll a div with overflow horizontally automatically when hovered to the right and left.

When I apply this code on a Right To Left RTL (Arabic) Web page it doesn't work, can we figure how to make it work?

I also need to learn how to make it scroll slower.

HTML

<div class="carousel-frame" id="carousel1">
 <ul>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 <li class="carousel-item">
 <img src="http://placehold.it/200x150" />
 </li>
 </ul>
</div>

CSS

.carousel-frame 
 width: 100%;
 margin-bottom: 0.5em;
 padding-bottom: 1em;
 position: relative;
 overflow-x: scroll;
 white-space: nowrap;
 
 .carousel-frame ul 
 margin: 0;
 padding: 0;
 height: 100%;
 list-style: none;

.carousel-frame li.carousel-item 
 cursor: pointer;
 display: inline-block;
 margin: 0 5px 0 0;
 padding: 0;

JQUERY

$.fn.make_carousel = function() 
var speed = 0;
var scroll = 0;
var container = $(this);
var container_w = container.width();
var max_scroll = container[0].scrollWidth - container.outerWidth();
var prev_frame = new Date().getTime();
container.on('mousemove', function(e) 
 var mouse_x = e.pageX - container.offset().left;
 var mouseperc = 100 * mouse_x / container_w;
 speed = mouseperc - 50;
).on ( 'mouseleave', function() 
 speed = 0;
);

function updatescroll() 
 var cur_frame = new Date().getTime();
 var time_elapsed = cur_frame - prev_frame;
 prev_frame = cur_frame;
 if (speed !== 0) 
 scroll += speed * time_elapsed / 50;
 if (scroll < 0) scroll = 0;
 if (scroll > max_scroll) scroll = max_scroll;
 container.scrollLeft(scroll);
 
 window.requestAnimationFrame(updatescroll);

 window.requestAnimationFrame(updatescroll);


 $("#carousel1").make_carousel();
 $("#carousel2").make_carousel();

Sample:

https://jsfiddle.net/dk6f3snf/8/