Slider JQuery não funciona

Estou tentando usar 2x o mesmo slider na página mas não funciona. Apenas funciona o primeiro. As imagens não aparecem quando duplico o html.

Abaixo o código que estou usando:

$(function(){
 $('#slides2').slides2({
 preload: true,
 preloadImage: 'img/loading.gif',
 play: 0,
 pause: 2500,
 hoverPause: true,
 animationStart: function(current){
 $('.caption').animate({
 bottom:-35
 },100);
 if (window.console && console.log) {
 // example return of current slide number
 console.log('animationStart on slide: ', current);
 };
 },
 animationComplete: function(current){
 $('.caption').animate({
 bottom:0
 },200);
 if (window.console && console.log) {
 // example return of current slide number
 console.log('animationComplete on slide: ', current);
 };
 },
 slidesLoaded: function() {
 $('.caption').animate({
 bottom:0
 },200);
 }
 });
 });

 

<div id="slides2">
	<!-- Seta esquerda -->
	<div class="botao-esquerdo2">
 <a href="#" class="prev2"><img src="img/arrow-prev2.png" alt="Arrow Prev" border="0" /></a>
	</div>
	<!-- Seta esquerda -->

	<!-- Fotos -->
	<div class="slides_container2">
	<div class="slide2">
 <a href="#"><img src="img/01.jpg" alt="fotos" /></a>
	</div>
	<div class="slide2">
 <a href="#"><img src="img/02.jpg" alt="fotos" /></a>
	</div>
	<div class="slide2">
 <a href="#"><img src="img/03.jpg" alt="fotos" /></a>
	</div>
	<!-- Fotos -->

	<!-- Seta direita -->
	<div class="botao-direito2">
 <a href="#" class="next2"><img src="img/arrow-next2.png" alt="Arrow Next" border="0" /></a>
	</div>
	<!-- Seta direita -->
</div>
</div>