Forums

I am using the yui carousel 2.8 version and wanted to know how I could replay the slideshow after the last image.

I use 3 images and autoplay through them works fine. But, the autoplay stops after the last image.

How can I start playing it again?

I had previously tried this and it worked but I also wanted to add animation setting to my carousel.

When I add all three , circular, autoplay and animation the last slide does not jump to the first slide in a circle but it goes backwards and the animation looked weird.

After researching through the forums, it is evident that animation does not work well with the other two settings and hence I though I can try to "REPLAY" or re-autoplay after the 3rd image.

These are the attributes that I have used -

function init_carousel()

{

var carousel = new YAHOO.widget.Carousel("carouselcontainer",
{
numVisible: 1,
isCircular: true,
animation: { speed: 1 },
autoPlayInterval: 5000
}); // Create the carousel object


carousel.render(); // Let YUI set up its styles

carousel.startAutoPlay();

carousel.show(); // Finally, show the carousel

}


YAHOO.util.Event.onDOMReady(init_carousel);

I updated my script a little to get the desired fade in fade out effect and removed animation from the config parameters.

But, the desired behavior deos not work in IE, it works fine in FF and Chrome.

Any ideas would help.

Here is my modified code -

function doFade() {
var container = document.getElementById("container");
YAHOO.util.Dom.setStyle(container, 'opacity', '0');
var ani = new YAHOO.util.Anim(container , {
opacity: {from: 0, to: 1 }
}, 7, YAHOO.util.Easing.easeOut);
ani.animate();
setInterval(doFade,7000);
}

function init_carousel()

{

var carousel = new YAHOO.widget.Carousel("container",
{
numVisible: 1,
isCircular: true,
autoPlayInterval: 7000,
//effect: { effect:YAHOO.widget.ContainerEffect.FADE, duration:0.30 }
//animation: { speed: 3, opacity: {from: 0, to: 1 }, effect: YAHOO.util.Easing.easeNone }
}); // Create the carousel object


carousel.render(); // Let YUI set up its styles

doFade(); // works in chrome & FF only

carousel.startAutoPlay();

//carousel.show(); // Finally, show the carousel

}


YAHOO.util.Event.onDOMReady(init_carousel);

Unfortunately, removing teh comma did not fix the issue.