Javascript-форум - jQueryUI carousel

Nikola Flamel,
Вариант ... жёлтый вверх ... красный вниз ... то и другое влево вправо ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .imgSlider{
    border: 1px solid #dadada;
  	width: 550px;
  	height: 200px;
  	overflow: hidden;
  	position: relative;
}
.imgSlider .carousel{
	list-style: none;
    margin: 0;
  	padding: 0;
  	height: 200px;

  	overflow: hidden;
  	width: 100%;


}
.imgSlider .carousel li{
	list-style: none;
    margin: 0;
  	padding: 0;
  	height: 150px;
    width: 150px;
    margin: 25px 25px 25px 0px;
    background-color: gold;
    float: left;
}
.imgSlider .carousel li:first-child{
  margin-left: 25px;
}

.imgSlider .red li{
   background-color: red;
   margin: 0px 25px 25px 0px;
}
.map {
    display:  table;
    width: 1775px;
}
.imgSlider ul.red{
  height: 175px;
}

  </style>
</head>

<body>
<div class="imgSlider" id="carousel"><div class="map">
      <ul class="carousel">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="carousel red">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul></div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
	var route;
	$('.map').draggable(
	  {
	  drag: function (event, ui) {
	      var h = $(this).parent().height() - $(this).height(),
	      w = $(this).parent().width() - $(this).width();
	      ui.position.left > 0 && (ui.position.left = 0);
	      ui.position.top > 0 && (ui.position.top = 0);
	      ui.position.left < w && (ui.position.left = w);
	      ui.position.top < h && (ui.position.top = h);
	      Math.abs(route[0] - ui.position.top) < 50 && (ui.position.top = route[0]);
	    },
	  start: function(event, ui) {route =[ui.position.top, ui.position.left]},
	  stop: function(event, ui) {
          var pos = {}, w = Math[route[1] < ui.position.left ? 'ceil':'floor'](ui.position.left / 175)*175;
          var w = Math[ Math.abs(route[0] - ui.position.top) > 50 ? 'round' : route[1] < ui.position.left ? 'ceil':'floor'](ui.position.left / 175)*175;
	      Math.abs(route[0] - ui.position.top) > 50 && $(this).animate({top: route[0] > ui.position.top? -175: 0}, 600);
          $(this).animate({left: w}, 600);
	    }
	  }
	)
</script>
</body>
</html>