<!-- DEMO -->
<style>/* объява */
#slideShowContainer{
	width:310px;
	padding:120px 0;
	height:250px;
	position:relative;
	z-index:1000;
	margin-left:10px;
}
#slideShow{
	position:absolute;
	height:250px;
	width:300px;
	background-color:#fff;
	margin:8px 0 0 10px;
	z-index:100;
	-moz-box-shadow:0 0 10px #111;
	-webkit-box-shadow:0 0 10px #111;
	box-shadow:0 0 10px #111;
}
#pictures { position: relative; height: 208px; }
#pictures img { position: absolute; top: 0; left: 0; margin: 10px 0 0 10px;}
#slideShowContainer > a{
	border:none;
	text-decoration:none;
	text-indent:-99999px;
	overflow:hidden;
	width:36px;
	height:37px;
	background:url('https://forumupload.ru/uploads/0007/e3/f7/64535-1.png') no-repeat;
	position:absolute;
	top:50%;
	margin-top:-21px;
}
#previousLink{left:-22px;}
#previousLink:hover{	background-position:bottom left;}
a#nextLink{right:-32px;background-position:top right;}
#nextLink:hover{background-position:bottom right;}
</style>
<center>
<div id="slideShowContainer">
    <div id="slideShow">
    	<div id="pictures">
    	<img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" alt="" />
    	<img src="https://forumupload.ru/uploads/0007/e3/f7/64525-2.png" alt="" />
    	<img src="https://forumupload.ru/uploads/0007/e3/f7/64525-3.png" alt="" />
    	<img src="https://forumupload.ru/uploads/0007/e3/f7/64525-4.png" alt="" />
    	<img src="https://forumupload.ru/uploads/0007/e3/f7/64525-5.png" alt="" />
    	<img src="https://forumupload.ru/uploads/0007/e3/f7/64526-1.png" alt="" />
    	<img src="https://forumupload.ru/uploads/0007/e3/f7/64526-2.png" alt="" />
    </div>
    </div>
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
</div></center>
<!-- галерейка -->
<script>
$(document).ready(function() { 
  var z = 0;
  var inAnimation = false;
  $('#pictures img').each(function() { 
    z++;
    $(this).css('z-index', z);
    });
  function swapFirstLast(isFirst) {
    if(inAnimation) return false;
    else inAnimation = true;
    var processZindex, direction, newZindex, inDeCrease;
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 

1; }
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
  $('#pictures img').each(function() {
    if($(this).css('z-index') == processZindex) { 
       $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', 

function() {
       $(this).css('z-index', newZindex) 
        .animate({ 'top' : '0' }, 'slow', function() { 
           inAnimation = false; 
            });
         });
       }
    else { 
       $(this).animate({ 'top' : '0' }, 'slow', function() {                      
         $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
          });
       }

    });
    return false;
   }
   $('#previousLink').click(function() {
    return swapFirstLast(false);
   });
   $('#nextLink').click(function() {
    return swapFirstLast(true);
   });
 });
</script>