Can anyone provide a simple fading slideshow jquery script for a noob?

Question

Does anyone have any suggestions on how to make a simple slideshow? My current one is choppy, and Im just looking for it to simply fade to the next image.

I am using the below code to autoplay my slideshow on my homepage and the css for the fade. The fade starts off very jerky/choppy. Im not sure what is causing this.

<script  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    window.setInterval(slideClick, 5000);

    function slideClick() {
     $(".slide").click();
    }
    </script>

.slide {    
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;}

Wheres the rest of your slider `JS` code? – Shivam Aug 22 '13 at 20:49 — Shivam, Aug 22 '13 at 20:49
Have you tried pre-loading the images? – Kevin B Aug 22 '13 at 21:15 — Kevin B, Aug 22 '13 at 21:15

score 0 · Answer 1 · edited May 23 '17 at 12:13

Try "pre-loading" the images first, for more immediate image manipulation:

// this variable is used in both code-snippets:
var images = $("img");

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $("<img/>")[0].src = this;
    });
}

preload($("img"));

...and then you could transition the images with javascript's setTimeout and jQuery's fadeIn() and fadeOut() :

var currentIndex = images.length;
var delay = 4000;

(function transitionImages() {
    // fading the current image out:
    images.eq(currentIndex).fadeOut(delay);

    var previousIndex = currentIndex;
    while (currentIndex == previousIndex) {
        // setting a new unique index here:
        currentIndex = Math.floor(Math.random() * images.length);
    }

    // fading the next image in:
    images.eq(currentIndex).fadeIn(delay / 2);

    // recursive timeout here:
    setTimeout(transitionImages, delay);
})(); // end of immediately-invoked function expression ("IIFE")

I'm having some trouble getting it to start exactly on page load, but I think it's because my images are too large ha, so be sure to try it with smaller images.

Try experimenting with having different delay times for fadeIn and fadeOut, but be aware that it will sometimes lead to glitchy image rendering.

Also, here's a good answer that explains why setTimeout is preferable to setInterval.

UPDATE:
Also it would seem that pre-loading the images should be done at the end of the <head> section, but alas I am still having jQuery response-time problems when trying this animation with large and/or numerous images...

Can anyone provide a simple fading slideshow jquery script for a noob?

1 Answers1