Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

slideshow + carousel together in jquery

Tags:

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