I have implemented a content fade in slide show inside the sliding content panel.
Fade in slide show is in the first li of the sliding panel but the problem is since sliding is moving randomly I am not able to show the slide show.
What I need is, Sliding should wait until the slideshow completes its animation. Once slideshow is done then the next li of the sliding panel should come up.
Here is the code used for that
//Fade in slide show
var quotes = $(".inner_detail div");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 1
});
If you wanna see the slideshow effect, please remove the slider code in js and then you can see how slideshow works. (Here a fiddle to show only slideshow)
Here is the working DEMO (in this demo the first sliding li has the slideshow div which cant be seen because sliding is moving fast)
Thanks in advance...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With