<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>