Click here to Skip to main content
14,028,059 members
Click here to Skip to main content
Add your own
alternative version

Stats

12.4K views
6 bookmarked
Posted 26 Mar 2016
Licenced CPOL

Quick And Easy Slide Show

, 28 Mar 2016
Rate this:
Please Sign up or sign in to vote.
How to add a quick, low cost slide show to your website

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

vandel212
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 1 Pin
Jan Zumwalt4-Apr-16 6:49
memberJan Zumwalt4-Apr-16 6:49 
QuestionNot finding it so easy Pin
Member 1011550030-Mar-16 13:03
professionalMember 1011550030-Mar-16 13:03 
GeneralSlide Show Pin
Member 1242320129-Mar-16 1:33
memberMember 1242320129-Mar-16 1:33 
BugBugs? Pin
Jan Zumwalt28-Mar-16 9:44
memberJan Zumwalt28-Mar-16 9:44 
GeneralRe: Bugs? Pin
vandel21228-Mar-16 21:01
membervandel21228-Mar-16 21:01 
SuggestionRe: Bugs? Pin
Jan Zumwalt4-Apr-16 6:27
memberJan Zumwalt4-Apr-16 6:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190419.4 | Last Updated 29 Mar 2016
Article Copyright 2016 by vandel212
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid