Cycle Plugin - How to use multiple slideshows on same page with hover control panel.

Cycle Plugin - How to use multiple slideshows on same page with hover control panel.

Hello - Im using the wonderful cycle plugin for a one-page portfolio site. I have multiple divs, each showing a slideshow of project images. As an option, I'm using the 'hover controls' feature for each slideshow, but whenever I click previous/ next, it advances all the slides on the page at the same time. How can I prevent this action and just click through one slideshow at a time? Thanks for any help.

Here is the JS:
  2. <script type="text/javascript">
  3. /* <![CDATA[ */
  4. $(function() {    
  5.     $('.slideshow').hover(
  6.         function() { $('.controls').fadeIn(); },
  7.         function() { $('.controls').fadeOut(); }
  8.     );
  9.     
  10.     $('.slides').cycle({
  11.         fx:     'scrollHorz',
  12.         speed:   400,
  13.         timeout: 0,
  14.         next:   '.next',
  15.         prev:   '.prev'
  16.     });
  17. });
  18. /* ]]> */
  19. </script>

Here is the HTML:
  2. <div class="slideshow">

  4. <div class="controls">
  5. <span>&larr; <a href="" class="prev">Prev</a></span>
  6. <span><a href="" class="next">Next</a> &rarr;</span>
  7. </div>
  8. <div class="slides">
  9. <a href="#"><img src="img/fpo_1.png" alt=""/></a>
  10. <a href="#"><img src="img/fpo_2.png" alt=""/></a>
  11. <a href="#"><img src="img/fpo_3.png" alt=""/></a>
  12. <a href="#"><img src="img/fpo_4.png" alt=""/></a>
  13. </div>
  14. </div>