Simple Jquery slideshow that works

[rbalascak]

Hello,
I am looking to have a simple slideshow on the homepage of my site.
10 pictures.
That fade in.
And fade out.
That is it.

I can not for the life of me get this to work… can anyone help please?
I tried following the instructions here https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

here is my page….
http://raeheartsdesign.com/2015/index2.html

[Shikkediel]

Slideshow works when the script is added afterwards (so no syntax issues there). The function wrapper’s a likely suspect to me :

(function($){ ... })(jQuery);

Instead you could try :

$(function() { ... });

Edit – although I doubt a bit that is really it.

[Chromawoods]

You are pretty close. The part where you fade in the next slide also needs to be within the callback of the previous slide’s fadeOut function. Check out this pen:

http://codepen.io/chromawoods/pen/gpNgvZ

[Shikkediel]

That’ll leave a white background in between instead of a crossfade. The code is seems to be working fine (when added in the Firebug console), it’s must have to do with timing of execution.

[Chromawoods]

@shikkediel you are right – it works that way too. Updated the pen.

But yeah, I agree with @beverleyh that nowadays jQuery is probably overkill for such a thing.

[Chromawoods]

@Shikkediel yes you are right, that works too. I have updated the pen.

But yeah, I agree with @Beverleyh that nowadays jQuery is probably overkill for such a thing.

[rbalascak]

THANK YOU, THANK YOU, THANK YOU!

[Author]

Posts