Duplicate an image carousel

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:


<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):


<!-- 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

I’m not really experienced with this plugin, so I have a question before I give my possibly-useless advice. Where are the #slider-stage, #previous, and #next elements coming from? The #viewport, #simplePrevious, and #simpleNext elements are self-explanatory, but I couldn’t figure out the other three, even after going over the “docs”.

However, I believe the advice I’m going to give applies regardless of where they come from or what they do. A carousel is basically built by telling the function where the list is located, and which elements to use for previous/next. So (because you’re also doing some auto-scrolling) you could generalize it all into a single function:


function autoCarousel(slides, prev, next) {
    var $slides = $(slides),
        $prev = $(prev),
        $next = $(next);

    jQuery(document).ready(function () {
        $slides.carousel(prev, next);
    });

    function slide() {
        $next.click();
    }
    var intervalId = window.setInterval(slide, 2000);

    $prev.add($next).click(function (event) {
        if (event.originalEvent) {
            window.clearInterval(intervalId);
        }
    });
}

Then you could just call it with the appropriate elements (obviously, you’d have to update your HTML as well):


autoCarousel('#slides1', '#somePrevBtn', '#correspondingNext');
autoCarousel('#differentSlideShow', '#etc', '#etcetc');

Hi,

Thanks for the input and sorry for my tardy reply.

I’ve tried updating the code, and the page doesn’t crash anymore. However, the carousel does not slide the images, there are just two ranges of static logo’s now. No animation.

This is the code I’ve used now:


function autoCarousel(slides, prev, next) {
    var $slides = $(slides),
        $prev = $(prev),
        $next = $(next);
 
    jQuery(document).ready(function () {
        $slides.carousel(prev, next);
    });
 
    function slide() {
        $next.click();
    }
    var intervalId = window.setInterval(slide, 2000);
 
    $prev.add($next).click(function (event) {
        if (event.originalEvent) {
            window.clearInterval(intervalId);
        }
    });
    
autoCarousel('#viewport1', '#prev1', '#next1');
autoCarousel('#viewport2', '#prev2', '#next2');
}

This is the HTML:


<div id="viewport1">
    <?php wp_list_bookmarks('title_li=&before=<li>&after=</li>&orderby=id'); ?>
<a id="prev1" style="visibility:hidden">Previous</a>
<a id="next1" style="visibility:hidden">Next</a>
</div>

<div id="viewport2">
    <?php wp_list_bookmarks('title_li=&before=<li>&after=</li>&orderby=id'); ?>
<a id="prev2" style="visibility:hidden">Previous</a>
<a id="next2" style="visibility:hidden">Next</a>
</div>

As said, the images are visible (at least the first 4 of them) in both carousels, but there is no sliding going on. What did I do wrong?

Thanks in advance for any help.

The problem now is that you put those last two lines in the wrong place:


function autoCarousel(slides, prev, next) {
    // ...

// These are INSIDE the function they're trying to call!
autoCarousel('#viewport1', '#prev1', '#next1');
autoCarousel('#viewport2', '#prev2', '#next2');
}

Just move them out and it should work:


function autoCarousel(slides, prev, next) {
    // ...
}

autoCarousel('#viewport1', '#prev1', '#next1');
autoCarousel('#viewport2', '#prev2', '#next2');

Yeah, that doesn’t do anything. Still two un-animated rows of images… :frowning:

I even had it like you say the first time, but because there’s no sliding going on, I placed it within the function hoping that this would change anything.

Could this have anything to do with the separate JS-file located here?

Now I’m thinking that it might be because I forgot about the document not being ready. I bet this is actually how it needs to be done:


function autoCarousel(slides, prev, next) {
    // ...
}

$(function () {
    autoCarousel('#viewport1', '#prev1', '#next1');
    autoCarousel('#viewport2', '#prev2', '#next2');
});

Yes! That did the trick!

Not only does it work like a charm, it doesn’t even conflict with the other JS on the page (which used to happen a lot before).

Thanks a million!