How to Create JavaScript Slideshow

Javascript Tutorials


Click on thumbnailed images to enlarge

This tutorial is designed to teach you how to create a JavaScript Slideshow. You can follow this step-by-step tutorial to create a JavaScript Slideshow in minutes and no JavaScript experience is required! This nifty slideshow lets the user manually move back and forth between images, by clicking on the provided buttons!
Software required
* Sothink JavaScript Web Scroller -- It helps web designer to create a variety of horizontal scrollers for ads, events, news, slide shows, and many other purposes easily. Click here to download>>
* Web Authoring Tool -- You can choose any web authoring tool, such as Expression Web, FrontPage, Dreamweaver, etc,.

Step1. Launch Sothink JavaScript Web Scroller and choose the template "slideshow".

Click here.
Choose a template from the library of templates

Then you can preview the scroller in the preview window

View the effect in the preview window

Step2. Set the properties of the scroller.

1. Add a new item in the List Panel. Click the "Append item(s)" button and choose an image from your computer. For example, we choose the image file "bedroom.gif" in the destop.

Add a new item in the List panel

Choosing this item and clicking OK button, this image will be added as a new item at the end of the scroller.
Add a new item in the List panel

Choose the added item in the list panel and Switch to "Item Setting - Item" panel. Clean text area of this item.
Clean text area

2. Set the whole property of the scroller in the "Global Setting - Setting" panel

Set the width value of the scroller

Step3. Publish the created scroller to the web page.

Click here to publish the scroller to web page


1. Click the button "Publish" on the toolbar and you check the options "Publish"

2. Save the created scroller as "scroller2.js" and save it in the folder "E:myscroller".

3. Open the web page "E:myscrollerpage2.htm" in web authoring tool. Copy the first part of code and paste them within code of the page.

4. Copy the second part of code and paste them within code of the page.

5. Choose the folder ""E:myscroller" and the JavaScript resource files will be copied to this folder.

6. Choose the folder ""E:myscroller" and the image resource files will be copied to this folder. Click the OK button.

Now, you have created a JavaScript Slideshow and published it to the web page successfully!

Tutorial Comments

Showing latest 1 of 1 comments

cZiRXX jyofwxfonisp, [url=] sljcvqrzjprb[/url], [link= ]qcaqworrlnht[/link],

By buckstab on Sep 2, 2010 1:08 pm

Tutorial Details

Author SourceTec View profile
Submitted on Jan 29, 2008
Page views 17,724
Favorites 3
Comments 1
Reviewer sweetasphyxia View profile
Approved on Jan 31, 2008