два слайдера на странице

Добрый день, возник вопрос. Установила слайдер, работает, но когда хочу поставить второй слайдер на туже страницу, слайдер вставляется, но фотографии не показывает и когда нажимаю на прокрутку, возвращает к первому слайдеру. Подскажите пожалуйста,что нужно изменить. я пробовала менять названия и поставлять значение 2, но наверное не совсем умело.

привожу код:

Ява:

<script type="text/javascript" src="/js/slides.js"></script> <script type="text/javascript"> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'loading.gif', play: 5000, pause: 2500, hoverPause: true, animationStart: function(current){ $('.caption').animate({ bottom:-35 },100); if (window.console && console.log) { console.log('animationStart on slide: ', current); }; }, animationComplete: function(current){ $('.caption').animate({ bottom:0 },200); if (window.console && console.log) { console.log('animationComplete on slide: ', current); }; }, slidesLoaded: function() { $('.caption').animate({ bottom:0 },200); } }); });</script>

HTML:

<div class="container" id="example"><div id="slides"><div class="slides_container"> <div class="slide"> <a href="#"><img src="slide-10.jpg" width="570" height="270" alt="Slide 1"></a> <div class="caption" style="bottom:0"><p>Логотип бла</p> </div></div> <div class="slide"> <a href="#"><img src="slide-20.jpg" width="570" height="270" alt="Slide 2"></a> <div class="caption"> <p>Тут описание</p> </div></div> </div> <a href="#" class="prev"><img src="arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div> <img src="example-.png" width="739" height="341" alt="Example Frame" id="frame"> </div>

CSS:

.container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;} #example {width:600px;height:350px;position:relative;} #ribbon {position:absolute;top:-3px;left:-15px;z-index:500;} #frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;} #slides {position:absolute;top:15px;left:4px;z-index:100;} .slides_container {width:570px;overflow:hidden;position:relative;display:none;} .slides_container div.slide {width:570px;height:270px;display:block;} #slides .next, #slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;} #slides .next {left:585px;} .pagination {margin:26px auto 0;width:100px;} .pagination li {float:left;margin:0 1px;list-style:none;} .pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(paginati.png);background-position:0 0;float:left;overflow:hidden;} .pagination li.current a {background-position:0 -12px;} .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 20px 0 20px;background:#000;background:rgba(0, 0, 0, .5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid #000;text-shadow:none;} .slide{position: absolute; top: 0px; left: 570px; display: none; z-index: 0;}