[BIGserg]

Есть слайдер, представляет собой одну большую картинку и миниатюры под ней, со стрелками. Я сделал, что бы при клике по центральной картинке он открывалась и становилась еще больше, подскажите как реализовать переход на следующую/предыдущую картинку кнопками < >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bxslider1.css">
<script type="text/javascript">
$(document).ready(function() {
	$('.bxslider1').bxSlider({
	pagerCustom: '#bx-pager1'
	});


	
	$('.slider_boxes').on('click','#clacks',function() {
		var srcc = $(this).attr('src');
		$('#shads').fadeIn();
		$('#open_img').attr('src', srcc);
		var img_cl = $('#open_img').attr('class');
		$('#big_imgs').fadeIn();		
		
			$('.slider_boxes').on('click', '.but_left', function() {
				//Появляется предыдущая картинка
			});
			
			$('.slider_boxes').on('click', '.but_right', function() {
				//Появляется с картинка
			});
		
	});
	
	
	
	$('#shads').click(function() {
		$('#shads').fadeOut();
		$('#big_imgs').fadeOut();
	});
	

	
});
</script>



<div id="shads" style="background:#000000;opacity:0.5;width:100%;height:100%;position:fixed;left:0px;top:0px;z-index:700;display:none;"></div>

<div class="slider_boxes">
<div id="big_imgs">
<img src="" id="open_img" width="1100px" height="640px">
	<div class="but_left"></div>
	<div class="but_right"></div>
</div>
<ul class="bxslider1">
  <li><img class="b1" id="clacks"  src="images/1/1-2.jpg" /></li>
  <li><img class="b2" id="clacks"  src="images/1/1-1.jpg" /></li>
  <li><img class="b3" id="clacks"  src="images/1/1.jpg" /></li>
</ul>

<div id="bx-pager1" style="text-align: center;width: 775px;margin-left: auto;margin-right: auto;border-radius: 5px;padding-top: 4px;-moz-box-shadow: 0 0 5px #ccc;-webkit-box-shadow: 0 0 5px #ccc;box-shadow: 0 0 5px #ccc;border: 5px solid #fff;background: #fff;-webkit-transform: translatez(0);-moz-transform: translatez(0);-ms-transform: translatez(0);-o-transform: translatez(0);transform: translatez(0);margin-bottom: 5px;">
 <a style="position:relative;" data-slide-index="0" href=""><img src="images/1_m/3_m.jpg" width="150px" height="100px"/><div id="lupa_z"></div></a>
 <a style="position:relative;" data-slide-index="1" href=""><img src="images/1_m/2_m.jpg" width="150px" height="100px"/><div id="lupa_z"></div></a>
 <a style="position:relative;" data-slide-index="2" href=""><img src="images/1_m/1_m.jpg" width="150px" height="100px"/><div id="lupa_z"></div></a>
</div>
</div>