Remove jQuery slide from slideshow after viewing

Question

I'm working with a few different jQuery slide shows and the idea came to me to have an introduction slide. Once a visitor has seen the slide and read it, the information is useless. Using jQuery Cycle as an example, how could I remove "slide 1" after a visitor navigates to "slide 2".

I would love to get this method to work rather than use a pop up or a timer function to remove the slide.

Any thoughts?

Can you post your code please? – mrtsherman Jan 28 '12 at 04:56 — mrtsherman, Jan 28 '12 at 04:56
I don't have any code. Just a question of theory. – user1161032 Jan 28 '12 at 22:50 — user1161032, Jan 28 '12 at 22:50

score 2 · Accepted Answer · edited Apr 07 '15 at 19:47

2

I think this post will help you. Here they have given a work around with sample code to add/remove slides from running slide show in jQuery cycle plug in.

http://forum.jquery.com/topic/jquery-jquery-cycle-remove-slide

edited Apr 07 '15 at 19:47

Cyclonecode

29,115
11
72
93

answered Jan 28 '12 at 05:06

ShankarSangoli

69,612
13
93
124

score 0 · Answer 2 · answered Jan 28 '12 at 05:43

There isn't really a way to do this nicely as far as I know. The jQuery Cycle plugin initializes when it is called with all the elements it will toggle through. There are other ramifications to consider, like if you were using a pager what happens to the first to it after a removal? I think your best bet is to use a standard jQuery animation effect, and in its callback initiate your slideshow.

So here are those two solutions. First, jQuery cycle that calls itself, on callback destroys itself and then restarts.

http://jsfiddle.net/RQapW/2/

$('div').cycle({
    timeout: 500,
    after: myFunction
});

function myFunction(currSlideElement, nextSlideElement, options, forwardFlag) {
    console.log(currSlideElement.src + ' : ' + nextSlideElement.src);

    //if we are on the second slide then remove the first one and restart slideshow
    if (currSlideElement == $('img')[0] && nextSlideElement == $('img')[1]) {
        $('div').cycle('destroy');
        $(currSlideElement).remove();
        $('div').cycle({
            timeout: 500,
        });    
    }
}

Just use typical jQuery animation effect.

http://jsfiddle.net/RQapW/

$('img.first').load( function() {
    $(this).fadeOut(5000, function() {
        $(this).remove();
        $('body').cycle({timeout: 500});
    })
});

Remove jQuery slide from slideshow after viewing

2 Answers2