Need advice for the malsap cyle2 plugin

[pdxSherpa]

I am placing several carousels on a page.
say…ten products, each has three images that rotate through.
I need to add the navigation to each carousel.
to do that you use the

per product, but can only add one id per document and it doesn’t seem to accept class for the nav.
Could i have some advice on how to get around this?

also when i wrap my three products images in a div class itme

<div id="aoc1" class="rotator">
							
								<div class="item">
									<img class="img-responsive" src="imgs//aoc-evo-1-435x290.jpg" alt="AOC EVO  LED* 20" title="AOC EVO  LED* 20" />
									<div class="info">infolots</div>
								</div>		
									
								<div class="item">
									<img class="img-responsive" src="imgs/aoc-evo-2-435x290.jpg" alt="AOC EVO  LED* 20" title="AOC EVO  LED* 20" />
									<div class="info">infolots</div>
								</div>		
									
								<div class="item">	
									<img class="img-responsive" src="imgs/aoc-evo-3-435x290.jpg" alt="AOC EVO  LED* 20" title="AOC EVO  LED* 20" />
									<div class="info">infolots</div>
								</div>	

							</div> <!-- carousel slide end -->
							<div id="nav"></div>

the rotator quits working. while it was working previously while it only had images no info div.
& this is the jquery

$(document).ready(function() {
		
	$('.rotator').cycle({
		fx: "fade",
        timeout: 3000,
        pager: "#nav",
        carouselVisible: 2,
		speed: 3000,			
	});	
});

</script>'''
thx
D