slideshow + carousel together in jquery

Question

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

Need to show the slideshow fully and then should slide the next li... — Sowmya, May 08 '13 at 10:50

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

You can not achieve this without modifying the plugin. It doesn't maintain a reference to itself, therefore it is simply a bunch of always running functions. Your can either

Modify the plugin and add a reference to itself as seen here
Write your own version

If you decide to go with the first method, the plugin contains a 'isPaused' property, which you can play with to pause the plugin until your animation is over.

score 2 · Answer 2 · answered May 08 '13 at 11:36

2

I think you can do it if you know the exact no. of elements in the Slideshow from their your can do simple Steps like

1) Wait_For_SlideToFinish = NO.Of.Elements * (fadeIn_Value + delay_Value + fadeOut_value )

2) Now you can Delay slider for xxx no of seconds Wait_For_SlideToFinish before you can initiate slider function.

If i understood your question then this can work for you.

answered May 08 '13 at 11:36

Learning

19,469
39
180
373

Could you please assuem 3 numbers and add the code for it in fiddle? – Sowmya May 08 '13 at 11:58
2

This is an efficient solution as it will only work the first time. Sowmya, I told you WHERE the problem is. It's up to you to fix it. Or you can just stay here and wait for someone else to write it for you, which is not what stack overflow is all about. – May 08 '13 at 12:47
I know how technically it should work (like it is explained in this answer) but this not what I expect from the SOF. I have tried my best and seeking for the exact solution not for the suggestion – Sowmya May 09 '13 at 06:05
@Sowmya what do you want him to do? – benastan May 14 '13 at 09:13
@benastan I have given both the demo, I just need somebody to combine both to work together.. – Sowmya May 14 '13 at 09:15
So you want code written for you, not an answer to your question (StackOverflow is Q&A). – benastan May 15 '13 at 21:16

score 0 · Answer 3 · answered May 21 '13 at 08:08

Do you want something like this?

 var quotes = $(".inner_detail div");
    var quoteIndex = -1;
    var fadeIn_time = 2000, delay_time = 2000, fadeOut_time = 2000;
    var time_length = quotes.length*(fadeIn_time + delay_time + fadeOut_time);

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(fadeIn_time )
            .delay(delay_time )
            .fadeOut(fadeOut_time , showNextQuote);
    }

    showNextQuote();    
//Slider
    $('#news-container').vTicker({ 
        speed: 800,
        pause: time_length,
        animation: 'fade',
        mousePause: false,
        showItems: 1
    });

score 0 · Accepted Answer · answered May 21 '13 at 09:22

I have found solution for this. I have used callback function to stop the slider until it is done with the action.

//Editorial Slide + Carousel
var isAni = true;
$(window).load(function(){
var quoteIndex = -1;

function showNextQuote(ele,e) {
    ++quoteIndex;
    e.isPaused = true;  
    if(quoteIndex < ele.length-1){
        ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").delay(2000).fadeOut(2000,"swing", function(){
            showNextQuote(ele,e)
        });
    }else{
        ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").fadeOut(2000,"swing",function(){ele.eq(quoteIndex+1 % ele.length).fadeIn(0);
        quoteIndex = -1;e.isPaused = false;});
    }
}
//showNextQuote();  

//Slider
    $('#news-container').vTicker({ 
        speed: 800,
        pause: 3000,
        animation: 'fade',
        mousePause: true,
        showItems: 1,
        callback : function(ele,e){
            var inner = ele.children("li:first").find("div.inner_detail");
            if(inner.length !=0){
                quoteIndex = -1;
                showNextQuote(inner.find("div"),e);
            }
        }
    });
});

PS - Call back function is written in vticker.js but unfortunately i am not able to post that file here.

Thanks all for your responses!!!

@KnowledgeSeeker I actually tried to put but for that I need to link the updated vticker.js in fiddle, I don't have that file uploaded anywhere. Is there any free site, where i can upload js file and link it to the jsfiddle? — Sowmya, May 22 '13 at 06:16
you can add a link to vticker.js if it is somewhere on internet or copy paste code in JS section of jsFiddler — Learning, May 22 '13 at 06:19

slideshow + carousel together in jquery

4 Answers4