Hi all,

On a website we've created, we have an image carousel looping partner logo's (below the image categories), which works perfect.

The client would like to duplicate this loop, on the same page exactly underneath the existing one. However, duplicating the code (html/js) won't work and will in fact stop the carousel from working. How can we resolve this?

This is the JS-code used:

Code JavaScript:
<script language="javascript" type="text/javascript" src="/js/infinitecarousel.js"></script>
 
<script type="text/javascript">    
jQuery(document).ready(function(){
    jQuery('#slider-stage').carousel('#previous', '#next');
    jQuery('#viewport').carousel('#simplePrevious', '#simpleNext');  
    });
 
function slide(){
  $('#simpleNext').click();
}
 
var intervalId = window.setInterval(slide, 2000);
 
$('#previous, #simpleNext').click(
 function(event){
  if(event.originalEvent){
   window.clearInterval(intervalId);
  }
 }
);
</script>

And the HTML (the PHP echoes an <ul> with hyperlinked images):

Code HTML4Strict:
<!-- partners slideshow -->
<div id="viewport">
    <?php wp_list_bookmarks('title_li=&before=<li>&after=</li>&orderby=id'); ?>
<a id="simplePrevious" style="visibility:hidden">Previous</a>
<a id="simpleNext" style="visibility:hidden">Next</a>
</div>

Thanks in advance for any help/suggestions

Stef