Слайдер картинок с перспективой на JQuery 

 <script type="text/javascript">
 (function($) {
 $.fn.parallaxSlider = function(options) {
 var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
 return this.each(function() {
 var $pxs_container 	= $(this),
 o  = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
 //
 //основной слайдер
 var $pxs_slider = $('.pxs_slider',$pxs_container),
 //элементы слайдера
 $elems = $pxs_slider.children(),
 //всего элементов
 total_elems = $elems.length,
 //навигационные кнопки
 $pxs_next = $('.pxs_next',$pxs_container),
 $pxs_prev = $('.pxs_prev',$pxs_container),
 //большая картинка
 $pxs_bg1 = $('.pxs_bg1',$pxs_container),
 $pxs_bg2 = $('.pxs_bg2',$pxs_container),
 $pxs_bg3 = $('.pxs_bg3',$pxs_container),
 //текущая картинка
 current = 0,
 //контейнер миниатюр
 $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
 //миниатюры
 $thumbs = $pxs_thumbnails.children(),
 //интервал режима автоповторения
 slideshow,
 //загрузка картинки
 $pxs_loading	= $('.pxs_loading',$pxs_container),
 $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
 // //начальная предзагрузка всех картинок
 var loaded = 0,
 $images = $pxs_slider_wrapper.find('img');
                                                //
 $images.each(function(){
 var $img	= $(this);
 $('').load(function(){
 ++loaded;
 if(loaded	== total_elems*2){
 $pxs_loading.hide();
 $pxs_slider_wrapper.show();
 //
//ширина одной картинки (полагается, что все одного размера)
 var one_image_w = $pxs_slider.find('img:first').width();
// // //необходимо задать ширину слайдера и каждого из его элементов, а также навигационных кнопок
 setWidths($pxs_slider,
 $elems,
 total_elems,
 $pxs_bg1,
 $pxs_bg2,
 $pxs_bg3,
 one_image_w,
 $pxs_next,
 $pxs_prev);
// //
//установить ширину миниатюр и равномерно распределить их
 $pxs_thumbnails.css({
 'width' : one_image_w + 'px',
 'margin-left' 	: -one_image_w/2 + 'px'
 });
 var spaces	= one_image_w/(total_elems+1);
 $thumbs.each(function(i){
 var $this 	= $(this);
 var left	= spaces*(i+1) – $this.width()/2;
 $this.css('left',left+'px');
// if(o.thumbRotation){
 var angle 	= Math.floor(Math.random()*41)-20;
 $this.css({
 '-moz-transform'	: 'rotate('+ angle +'deg)',
 '-webkit-transform'	: 'rotate('+ angle +'deg)',
 'transform' : 'rotate('+ angle +'deg)'
 });
 }
 // при наведении миниатюры сдвигаются вверх и вниз
 $this.bind('mouseenter',function(){
 $(this).stop().animate({top:'-10px'},100);
 }).bind('mouseleave',function(){
 $(this).stop().animate({top:'0px'},100);
 });
 });
// //делаем первую миниатюру активной
 highlight($thumbs.eq(0));
 // //сдвиг при клике по навигационной кнопке
 $pxs_next.bind('click',function(){
 ++current;
 if(current >= total_elems)
 if(o.circular)
 current = 0;
 else{
 --current;
 return false;
 }
 highlight($thumbs.eq(current));
 slide(current,
 $pxs_slider,
 $pxs_bg3,
 $pxs_bg2,
 $pxs_bg1,
 o.speed,
 o.easing,
 o.easingBg);
 });
 $pxs_prev.bind('click',function(){
 --current;
 if(current < 0)
 if(o.circular)
 current = total_elems – 1;
 else{
 ++current;
 return false;
 }
 highlight($thumbs.eq(current));
 slide(current,
 $pxs_slider,
 $pxs_bg3,
 $pxs_bg2,
 $pxs_bg1,
 o.speed,
 o.easing,
 o.easingBg);
 });
// //клик по миниатюре сдвигает соответствующую картинку
//
 $thumbs.bind('click',function(){
 var $thumb	= $(this);
 highlight($thumb);
 //будет ли автоповтор прекращаться при клике пользователя
 if(o.auto)
 clearInterval(slideshow);
 current 	= $thumb.index();
 slide(current,
 $pxs_slider,
 $pxs_bg3,
 $pxs_bg2,
 $pxs_bg1,
 o.speed,
 o.easing,
 o.easingBg);
 });
// //если настройка определена, то активировать автоповтор
     if(o.auto != 0){
 o.circular	= true;
 slideshow	= setInterval(function(){
 $pxs_next.trigger('click');
 },o.auto);
 }
// //когда изменяем размер окна, нам необходимо пересчитать ширину элементов слайдера в соответствии с новым размером окна. Необходимо сдвинуть текущую картинку снова, до тех пор, пока левая граница слайдера соответствует условиям. 
 $(window).resize(function(){
 w_w	= $(window).width();
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
 slide(current,
 $pxs_slider,
 $pxs_bg3,
 $pxs_bg2,
 $pxs_bg1,
 1,
 o.easing,
 o.easingBg);
 });
 }
 }).error(function(){
 alert('here')
 }).attr('src',$img.attr('src'));
 });
 });
 };
 //текущая ширина окон
 var w_w = $(window).width();
 var slide = function(current,
 $pxs_slider,
 $pxs_bg3,
 $pxs_bg2,
 $pxs_bg1,
 speed,
 easing,
 easingBg){
 var slide_to	= parseInt(-w_w * current);
 $pxs_slider.stop().animate({
 left	: slide_to + 'px'
 },speed, easing);
 $pxs_bg3.stop().animate({
 left	: slide_to/2 + 'px'
 },speed, easingBg);
 $pxs_bg2.stop().animate({
 left	: slide_to/4 + 'px'
 },speed, easingBg);
 $pxs_bg1.stop().animate({
 left	: slide_to/8 + 'px'
 },speed, easingBg);
 }
 var highlight = function($elem){
 $elem.siblings().removeClass('selected');
 $elem.addClass('selected');
 }
 var setWidths = function($pxs_slider,
 $elems,
 total_elems,
 $pxs_bg1,
 $pxs_bg2,
 $pxs_bg3,
 one_image_w,
 $pxs_next,
 $pxs_prev){
//ширина слайдера равняется ширине окон, помноженная на число элементов слайдера
 var pxs_slider_w	= w_w * total_elems;
 $pxs_slider.width(pxs_slider_w + 'px');
 //каждый элемент будет иметь ширину, равную ширине окон
 $elems.width(w_w + 'px');
//мы также устанавливаем ширину div каждой большой картинки. Размер тот же, что и для pxs_slider
 $pxs_bg1.width(pxs_slider_w + 'px');
 $pxs_bg2.width(pxs_slider_w + 'px');
 $pxs_bg3.width(pxs_slider_w + 'px');
//
//левая и правая границы навигационных кнопок "следующий" и  "предыдущий"  будут: windowWidth/2 – imgWidth/2 + какой-то margin (не соприкасающийся с границами картинок)
 var position_nav	= w_w/2 – one_image_w/2 + 3;
 $pxs_next.css('right', position_nav + 'px');
 $pxs_prev.css('left', position_nav + 'px');
 }
//
 $.fn.parallaxSlider.defaults = {
 auto : 0,	//сколько секунд периодически слайдировать контент.
 // если "0", то автосдвиг выключен.
 speed : 1000,//скорость анимации каждого слайда
 easing : 'jswing',// сглаживающий эффект анимации слайда
 easingBg : 'jswing',//сглаживающий эффект для анимации фона
 circular : true,//повторяющийся слайдер
 thumbRotation	: true//миниатюры будут случайным образом ротироваться
 };
//если убрать коммент со строки внизу, то будут включены эти эффекты:
 //easeInOutExpo,easeInBack
 })(jQuery);
 </script>
//запуск параллакса
 <script type="text/javascript">
 $(function() {
 var $pxs_container	= $('#pxs_container');
 $pxs_container.parallaxSlider();
 });
</script>