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