Simple image slideshow

The following code snippets allow you to add simple image slideshow functionality to your page or site, which will fade nicely between images after a set duration. The duration defaults to 5 seconds, but can be adjusted per slideshow if needed.

The CSS and Javascript snippets can be added to either a single page's CSS and Javascript, or can be added to your Global CSS and Global Javascript to enable the functionality site wide.

Please Note: The slideshow will be the size of the first image in the sequence. Ideally all the images in the sequence should be the same size.

CSS

 1 .image-slideshow  {
 2     position: relative;
 3     overflow: hidden;
 4 }
 5 
 6 .image-slideshow img {
 7     top: 0;
 8     left: 0;
 9     position: absolute;
10     z-index: 1;
11     transition: opacity 1s;
12     opacity: 0;
13     width: 100% !important;
14     height: auto !important;
15     vertical-align: top;
16     will-change: opacity;
17 }
18 
19 .image-slideshow img:first-child {
20     position: relative;
21 }
22 
23 .image-slideshow img.active-image {
24     z-index: 3;
25     opacity: 1;
26 }
27 
28 .image-slideshow img.previous-image {
29     z-index: 2;
30     opacity: 1;
31 }

Javascript

 1 $(function() {
 2     $('.image-slideshow').each(function(index) {
 3         var slideshowElement = this;
 4         var duration = $(slideshowElement).attr('data-speed');
 5         if (typeof duration == typeof undefined || duration == false) {
 6             duration = 5;
 7         } else {
 8             duration = parseInt(duration);
 9         }
10         $(slideshowElement).children('img:first').addClass('active-image');
11         setInterval(function() { CycleImage(slideshowElement); }, duration * 1000);
12     });
13 });
14 
15 function CycleImage(slideshowElement){
16     var active = $(slideshowElement).children('.active-image');
17     var next = (active.next().length > 0) ? active.next() : $(slideshowElement).children('img:first');
18     active.addClass('previous-image');
19     active.removeClass('active-image');
20     next.addClass('active-image');
21 }
22 
23 $(".image-slideshow").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
24     $(this).children('.previous-image').removeClass('previous-image');
25 });

Usage

To use the slideshow on a page, change the editor (CKEditor) to source view, and insert the follow snippet where you want the slideshow to appear:

1 <p class="image-slideshow">PUT IMAGES HERE</p>

Then change back to normal view, and replace the "PUT IMAGES HERE" text with the images you want to use, by inserting images as normal.

If you want to change the duration between each image change from 5 seconds to something else, add a "data-speed" attribute to the <p> tag set to the number of seconds you want the duration to be. For example for a 10 second duration, you tag would look like this:

1 <p class="image-slideshow" data-speed="10">PUT IMAGES HERE</p>