<div class="container">  
<div id="container_wide">  
<div class="product_container" id="product_browser">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div class="product_container" id="product_apple">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div class="product_container" id="product_construction">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div class="product_container" id="product_cake">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div style="clear:both"></div>  
</div>  
  </div>  
  <div class="nav">  
<a href="#" class="product_nav" id="nav_browser">Название категории</a>  
<a href="#" class="product_nav" id="nav_apple">Название категории</a>  
<a href="#" class="product_nav" id="nav_construction">Название категории</a>  
<a href="#" class="product_nav" id="nav_cake">Название категории</a>  
  </div>

* {  
font-family: Arial, "Free Sans";  
  }  
  .container {  
border: 5px solid #0099cc;  
width: 700px;  
overflow: hidden;  
margin: 0 auto;  
margin-top: 50px;  
padding: 10px 0;  
-webkit-border-radius: .3em .3em 0 0;  
-moz-border-radius: .3em .3em 0 0;  
border-radius: .3em .3em 0 0;  
  }  
  #container_wide {  
width: 2800px;position: relative;  
  }  
  .product_container {  
text-align: center;  
width: 700px;  
float: left;  
position: relative;  
  }  
  .product_container a {  
margin: 0 12px;  
position: relative;  
  }  
  .nav {  
width: 700px;  
background: #0099cc;  
margin: 0 auto;  
text-align: center;  
border: 5px solid #0099cc;  
border-bottom-width: 10px;  
-webkit-border-radius: 0 0 .3em .3em;  
-moz-border-radius: 0 0 .3em .3em;  
border-radius: 0 0 .3em .3em;  
  }  
  .nav a {  
color: #fff;  
font-size: 12px;  
letter-spacing: 1px;  
margin-right: 10px;  
font-weight: bold;  
text-decoration: none;  
  }  
  .nav a:hover {  
color: #e3e3e3;  
  }

$(document).ready(function() {  
var displayed = "product_browser";  
var cindex = 0; // Текущий индекс (выводимый раздел)  

function loopMoveLeft(el, move) {  
if (el.length == 1) {  
setTimeout(function() {  
el.animate({ left: move }, {  
duration: 'slow',  
easing: 'easeOutBounce'  
});  
loopMoveLeft(el.next(), move);  
}, 100);  
}  
}  

function loopMoveRight(el, move) {  
if (el.length == 1) {  
setTimeout(function() {  
el.animate({ left: move }, {  
duration: 'slow',  
easing: 'easeOutBounce'  
});  
loopMoveRight(el.prev(), move);  
}, 100);  
}  
}  

function slideItem(obj_el) {  
var product = $(obj_el).attr("id").replace("nav_", "");  
var contid = 'product_' + product;  

// Текущий отображаемый элемент  
var elFirst = $("#"+displayed+" a:first-child");  
var elLast = $("#"+displayed+" a:last-child");  
var total_el = $("#"+displayed).children().length;  

var index = $(obj_el).index();  

// Новый элемент для вывода  
var el_f = $("#"+contid+" a:first-child");  
var el_l = $("#"+contid+" a:last-child");  
var total_new = $("#"+contid).children().length;  

var movement = -700 * index;  

if (cindex > index) {  
loopMoveRight(elLast, movement);
setTimeout(function() {  
loopMoveRight(el_l, movement)
}, (total_el + 1) * 100);  
} else if (cindex < index) {  
loopMoveLeft(elFirst, movement);
setTimeout(function() {  
loopMoveLeft(el_f, movement)  
}, (total_el + 1) * 100);  
}

cindex = index;  
displayed = contid;  

return (total_el + 5 + total_new) * 100;  
}  

var timeout;  

$(".product_nav").click(function() {  
$(".product_nav").unbind('click');  
timeout = slideItem(this);  

// Защита от дурака  
setTimeout(function() {  
$(".product_nav").bind('click', function() {  
timeout = slideItem(this);  
});  
}, timeout);  
});  
  });

<script type="text/javascript" src="Ваша ссылка /jquery-1.6.min.js"></script>  
  <script type="text/javascript" src="Ваша ссылка /jquery.easing.1.3.js"></script>

<link type="text/css" href="Ваша ссылка "/>