Плавная остановка карусели

[maruo34]

Имеется подобие слайда с картинками, которое прокручивается в бесконечном цикле.
Приостанавливается при наведении курсором на нее.
Как реализовать следующие:

1. Запускается
2. Крутится секунд 10
3. Плавно останавливается теряя скорость прокрутки

<div id="carusel" style="border:solid;width:500px;overflow:auto">
  <div id="scrolled"> <img src="#" width="300px" height="200px" style="background-color:green;float:left;" alt="image 0"> <img src="#" width="350px" height="200px" style="background-color:yellow;float:left;" alt="image 1"> <img src="#" width="250px" height="200px" style="background-color:blue;float:left;"
    alt="image 2"> <img src="#" width="310px" height="200px" style="background-color:red;float:left;" alt="image 3"> </div>
</div>

$(document).ready(function() {
  var marg = 2; // отступы между фотками
  var hght = 100; // высота карусели 
  speed = 12; // скорость прокрутки
  
 
 
  var imgs = $("#scrolled > img");
  var scrl = $("#scrolled");
  var crsl = $("#carusel");
  wdth = 0;
  imgs.css("margin", "0 " + marg);
  crsl.css({
    overflow: "hidden",
    "height": hght
  });
  $.each(imgs, function(index, value) {
    wdth += ($(imgs[index]).width() + (marg * 2) + 5);
  })
  scrl.width(wdth);
 
  function rightScroll() {
    var firstImg = $("#scrolled > img:first");
    var lastImg = $("#scrolled > img:last");
    var scroll = crsl.scrollLeft();
    crsl.scrollLeft(scroll + speed);
    if (scroll > firstImg.width()) {
      crsl.scrollLeft(scroll - (firstImg.width() + (marg * 2)));
      firstImg.clone(true).insertAfter(lastImg);
      $(firstImg).remove();
      
    }
  }
  crsl.mouseover(function() {
    clearInterval(timer);
  }).mouseout(function() {  
    timer = setInterval(rightScroll, 10);
  })
  timer = setInterval(rightScroll, 10);
});

ДЕМО