Quick And Easy Slide Show

Introduction

This adds a very simple slide show to your website. You can have as many slides as you want, has a good bit of flexibility.

Using the Code

Implementing this couldn't be any easier. There are 3 small sections to this, the CSS, HTML, and JavaScript.

The CSS

So there really isn't much to the CSS here, just some styling for the slide's container.

<style type="text/css">
     .SlideShow{height:100%; width:100%; position:absolute;}
</style>

Making it absolute positioning makes the slide sit on top of each other instead of below.

The HTML

Here, we have the HTML. Nothing ground breaking, but that's sort of the point. Very basic stuff. Just add in as many of the SlideShowSlide divs you want, and put anything you want in them.

<div style="position:relative;">
       <div id="SlideShowSlide1" class="SlideShow">
           <img src="images/Slide1.jpg" style="height:396px; width:896px;" />
       </div>
       <!--+++++++++++++-->
       <div id="SlideShowSlide2" class="SlideShow" style="display:none;">
           <h1>Here is some text</h1>
       </div>
       <!--+++++++++++++-->
       <div id="SlideShowSlide3" class="SlideShow" style="display:none;">
           <div>Here is a div inside the slide. Neat huh?</div>
       </div>
</div> 

Some things to keep in mind here are that the first div needs to be position:relative so that the slides are contained within that div. The second thing to keep in mind is that the div's id's need to be formatted exactly as shown "SlideShowSlide#" so that the JavaScript can find them. The height and width of the Images can be anything you like.

The JavaScript (and jQuery)

So here is the meat and potatoes of the project, but as you'll see, it's nothing too complicated either.

<script type="text/javascript">    
   var intCurrentSlide = 1;  
   var intDelayBetweenSlides = 4000;    
   var intFadeTime = 1250;    
   
   $(document).ready(function () {        
         $('#SlideShowSlide1').delay(intDelayBetweenSlides).show(function () {            
              SlideShowGo();      
         });    
    });

   function SlideShowGo() {
       if (intCurrentSlide == $('.SlideShow').length) {
           $('#SlideShowSlide' + intCurrentSlide).fadeOut(intFadeTime);
           $('#SlideShowSlide1').fadeIn(intFadeTime, function () {
               $('#SlideShowSlide1').delay(intDelayBetweenSlides).show(function () {
                   intCurrentSlide = 1;
                   SlideShowGo();
               });
           });
       }
       else {
           $('#SlideShowSlide' + intCurrentSlide).fadeOut(intFadeTime);
           $('#SlideShowSlide' + (intCurrentSlide + 1)).fadeIn(intFadeTime, function () {
               $('#SlideShowSlide' + 
               (intCurrentSlide + 1)).delay(intDelayBetweenSlides).show(function () {
                   intCurrentSlide++;
                   SlideShowGo();
               });
           });
       }
   }
</script>

The "$('.SlideShow').length" is what grabs the number of slides, so make sure each slide has that class or you'll have problems. You can set the delay between slides with the intDelayBetweenSlides variable, and the time it takes to transition with the intFadeTime variable.

That's all there is to it. Enjoy!

Extra Stuff

Looks like some people are having trouble with this. Here is a working sample, literally copy and pasted it from here:

https://jsfiddle.net/nLjpx3ja/

History

Keep it moving, nothing to see here.