<link rel="stylesheet" href="http://ruseller.com/lessons/les1016/demo/js/theme/jquery.ui.all.css">  
  <script type="text/javascript" src="http://ruseller.com/lessons/les1016/demo/js/jquery-ui-1.8.7.custom.min.js"></script>  
  <script type="text/javascript" src="http://ruseller.com/lessons/les1016/demo/js/jquery-css-transform.js"></script>  
  <script type="text/javascript" src="http://ruseller.com/lessons/les1016/demo/js/rotate3Di.js"></script>  
  <script type="text/javascript">  
  $(function() {  
  $( "#slider" ).slider({  
  value: -100,  
  min: -100,  
  max: 0,  
  step: 1,  
  slide: function( event, ui ) {  
  $(".img").css("margin-left", ui.value + "px");  
  }  
  });  
   
  $("img").rotate3Di(45);  
   
  $("img").click(function() {  
  var str = $(this).attr("style");  
  var index = str.indexOf("skew");  
  var substr = str.substr(index+5, 10);  
  var split = substr.split(", ");  
  var val = parseFloat(split[1])  
  if ((val == 0)) {  
  $(this).rotate3Di(45, 1000);  
  } else {  
  $(this).rotate3Di(0, 1000);  
  }  
  });  
  });  
  </script>  
  <style type="text/css">  
  #container {  
  padding: 50px;  
  margin-top: 20px;  
  }  
  #images {  
  padding: 40px;  
  }  
  #images img {  
  margin-left: -100px;  
  background: #e9e9e9;  
  padding: 10px;  
  cursor: pointer;  
  }  
  #images img:hover {  
  background: #333;  
  }  
  #slider {  
  width: 380px;  
  }  
  </style>

<div id="slider"></div>  
  <br/>  
  <div id="images">  
  <img class="img_main" src="Ссылка на картинку"/>  
  <img class="img_main" src="Ссылка на картинку"/>  
  <img class="img_main" src="Ссылка на картинку"/>  
  <img class="img_main" src="Ссылка на картинку"/>  
  <img class="img_main" src="Ссылка на картинку"/>  
  <img class="img_main" src="Ссылка на картинку"/>  
  </div>