CODEWITHSUNDEEP
javascriptjquerycssslideshow
user1823693
user1823693

Reputation:

image jumping downwards on a slideshow

I'm having problems with a slideshow (the problem is almost the same as this one Simple jQuery Slideshow Image Moving Downwards for a Split Second but its not working for me). The problem is with the next() call. I tried to make a kind of sleep function but im not able to call it there.

Here is my code:

CSS:

.slidePromo { 
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative; 
    width: 700px; 
    height: 300px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    overflow: hidden;
}

.slideshow > div { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    overflow: auto;
}

HTML:

<div id="slidePromo" class="slidePromo">
    <div><img src="./promos/banner.jpg"></div>
    <div><img src="./promos/next.jpg"></div>
    <div><img src="./promos/splash.jpg"></div>
</div>

JQuery

function slider(id, fade, timer) {
    $("#" + id + " > div:gt(0)").hide();
    setInterval(function() { 
    $('#' + id + ' > div:first')
        .fadeOut(fade)
        .next()
        .fadeIn(fade)
        .end()
        .appendTo("#" + id);
    },  timer);
}

any idea? thanks and regards.

Upvotes: 2

Views: 710

Answers (2)

skadermen
skadermen

Reputation: 58

May be becouse in css you have class slideShow, but you wrapper has class slidePromo. This css block don't even apply on smth. Change class - it will work without jquery changes.

P.S. jquery code is awful. Try this:

function slider(id, fade, timer) {
    var holder = $('#' + id);
    holder.find(" > div:gt(0)").hide();
    setInterval(function() { 
    holder.find(' > div:first')
        .fadeOut(fade)
        .next()
        .fadeIn(fade)
        .end()
        .appendTo(holder);
    },  timer);
}

This is little upgrade.

Upvotes: 0

James
James

Reputation: 1572

Try this:

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(100,function(){
    $(this).next().fadeIn(1000).end().appendTo('#slideshow');
});
},  3000);

use a call back function on the fadeout and it will wait until it's completely gone before it appends the other one.

Upvotes: 2

Related Questions