Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

Simple jQuery Slideshow

5.00/5 (1 vote)
6 Apr 2013CPOL 25.5K   1.1K  
A slide show for web form projects.

Introduction

The main purpose of this article is to present a slide show for web form projects.

Using the code

You need to reference the jQuery script in your HTML page: 

<script src="jquery-1.9.1.min.js"></script> 

also the script for this plug-in:  

XML
<script src="slideshow.js"></script> 

so you need an Array of objects as the following for slide show

JavaScript
var mySlides = new Array(
    { image: 'images/1.jpg', title: 'Tooltip for slide 1',url:'http://www.google.com' },
    { image: 'images/2.jpg', title: 'Tooltip for slide 2', url: 'http://www.codeproject.com' }
    );     

Note :  Name of members must be as the example.  

* mySlides can fill with an AJAX response 

Now you can invoke slideshow on any DIV element  

JavaScript
$('#div_SlideShow').slideshow({slides:mySlides}); 

This is the default call, you can also use these options to have more compatible slideshow:

  • delay : Delay between two slides [Default=5000] 
  • effect: jQuery effect name to show and hide slides [Default='blind'] 
  • effectDuration: Duration of effect  [Default=500] 
  • autostop: To stop automatically on mousemove and start again on mouseout [Default=true] 
  • effectDetail: Detail of JQuery effects such as : direction , etc. [Default=direction:'right'] 

A customized call would look like this: 

JavaScript
$('#div_SlideShow').slideshow({
    slides: Slides, 
    delay:2000,
    effect: 'blind',
    effectDuration: 400,
    autostop:true,
    effectDetail: {
        direction:'up'
    }
});

And you can Stop and Start slideshow manually like this: 

JavaScript
$('#div_SlideShow').stop();
$('#div_SlideShow').start();

License

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