Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy Java Script Code for Sideways Slide show

By Stephen Bucaro

Sideways sliding slide shows are very popular on the Web, especially with companies that want to display their products or feature various aspects of their business. It's not difficult to program a sideways slide show, and in this article I show you how to create one with some basic Java Script.

The first thing you need to do is create your slides. To use this code, all the slide images need to be the same dimensions. You can resize all your images to be the same size using a graphics application. Sometimes, if an image is much smaller than the others, increasing its size too much can make it appear blurry. In that case you may choose to put a border around the image to increase its size.

You can use three or more images in the slide show. This example uses four images which are all 256 by 256 pixels in size.

The second thing you need to do is place the html code to display the first and second slide in the body section of your webpage. Shown below is the code used for this example.

<div class="cliparea">
  <div id="pan" class="pan">
    <img id="leftImage" src="images/scene2.jpg" /><img id="rightImage" src="images/scene1.jpg" />
  </div>
</div>

Note the images id attributes are set to leftImage and rightImage, and that the images are nested in a div element with its id attribute set to pan and its class attribute set to pan. And that div is nested in another div with its class attribute set to cliparea.

Next, you need to paste the style block shown below into the head section of your web page, just below the title tag.

<style type="text/css">
.cliparea
{
position: absolute;
top: 140px;
left: 300px;
width:256px;
height:256px;
clip: rect(0 256 256 0);
}
.pan
{
position: relative;
top: 0px;
left: 0px;
width: 530px;
height:256px;
}
</style>

The style code above defines two classes. Note the bottom class, .pan. This is the style class for the div that we will use java script to slide back-and-forth. You need to change the height value to the height of your images. You need to change the Width value to 2 times the width of your images.

Note the top class, cliparea. This class defines the div as a clip area, which is like a viewport through which we will view the slide show. You need to change the height value to the height of your images. You need to change the Width value to the width of your images.

In the cliparea class, you'll need to change the top and left values in order to position the slide show on your webpage. The CSS clip rule only applies to absolute positioned elements. This may make it a bit difficult to position the slide show where you want it on your webpage. In fact the hardest part of this example may be positioning the slide show. We'll discuss that later, but for now lets examine the java script code.