Dynamic Drive DHTML Scripts- Carousel Slideshow

New Revised CSS Library Forums Web Tools

Carousel Slideshow

Description: Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion. Highlights of this script other than its stunning appearance are:

Slideshow can be set to either slide in from right to left, or the reverse.
Slideshow can be set to be 4-sided, 6, 8, or 12. A 4-sided slideshow for example means 2 images will be in view at all times (the other two behind the scene).
Each image can have an optional link associated with it.
Slideshow pauses on mouseover.
A DOM based script that works in modern DHTML browsers- IE5+, NS6+, Opera 7+.

Are you impressed yet?

Demo (6-sided):

Directions

Step 1: Insert the below script into the BODY section of your page where you wish the slideshow to appear:

Select All
<script type="text/javascript"> /*********************************************** * Carousel Slideshow script- © Ger Versluis 2003 * Permission granted to DynamicDrive.com to feature script * This notice must stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ /******************************************************** Create a div with transparent place holder in your html <div id="Carousel" style="position:relative"> <img src="placeholder.gif" width="404" height="202"> </div> placeholder width: 4 sided: 1.42 * carousel image width + 3 6 sided: 2 * carousel image width +4 8 sided: 2.62 * carousel image width + 5 12 sided: 3.87 * carousel image width + 7 placeholder height: carousel image height+2 Insert onload in body tag <body onload="Carousel()"> *********************************************************/ // 7 variables to control behavior var Car_Image_Width=140; var Car_Image_Height=225; var Car_Border=true; // true or false var Car_Border_Color="white"; var Car_Speed=4; var Car_Direction=true; // true or false var Car_NoOfSides=8; // must be 4, 6, 8 or 12 /* array to specify images and optional links. For 4 sided carousel specify at least 2 images For 6 sided carousel specify at least 3 For 8 sided carousel specify at least 4 For 12 sided carousel specify at least 6 If Link is not needed keep it "" */ Car_Image_Sources=new Array( "photo1.jpg","http://www.dynamicdrive.com", "photo2.jpg","http://www.javascriptkit.com", "photo3.jpg","", //this slide isn't linked "photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line ); /***************** DO NOT EDIT BELOW **********************************/ CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2); C_Coef=new Array( 3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0, Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3); var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9; C_Pre_Img=new Array(Car_Image_Sources.length); var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW, C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2; function Carousel(){ if(document.getElementById){ for(i=0;i<Car_Image_Sources.length;i+=2){ C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]} C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1; Car_Div=document.getElementById("Carousel"); for(i=0;i<C_HalfNo;i++){ CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]); CW_I[i].style.position="absolute"; CW_I[i].style.top=0+"px"; CW_I[i].style.height=Car_Image_Height+"px"; if(Car_Border){ CW_I[i].style.borderStyle="solid"; CW_I[i].style.borderWidth=1+"px"; CW_I[i].style.borderColor=Car_Border_Color} CW_I[i].src=Car_Image_Sources[2*i]; CW_I[i].lnk=Car_Image_Sources[2*i+1]; CW_I[i].onclick=C_LdLnk; CW_I[i].onmouseover=C_Stp; CW_I[i].onmouseout=C_Rstrt} CarImages()}} function CarImages(){ if(!C_Stppd){ C_TotalW=0; for(i=0;i<C_HalfNo;i++){ C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width); C_TotalW+=C_ClcW[i]} C_LeftOffset=(C_MaxW-C_TotalW)/2; for(i=0;i<C_HalfNo;i++){ CW_I[i].style.left=C_LeftOffset+"px"; CW_I[i].style.width=C_ClcW[i]+"px"; C_LeftOffset+=C_ClcW[i]} C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1); if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){ if(C_CrImg==Car_Image_Sources.length)C_CrImg=0; if(Car_Direction){ CW_I[C_HalfNo]=CW_I[0]; for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1]; CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg]; CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]} else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1]; CW_I[0]=CW_I[C_HalfNo]; CW_I[0].src=Car_Image_Sources[C_CrImg]; CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]} C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}} setTimeout("CarImages()",50)} function C_LdLnk(){if(this.lnk)window.location.href=this.lnk} function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;} function C_Rstrt(){C_Stppd=false} </script> <div id="Carousel" style="position:relative"> <img src="placeholder.gif" width="371" height="225"> </div> <p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

Step 2: Download the the below image "placeholder.gif", which the above script requires and references:

(enlarged for easier download. Right click and choose "Save As").

Step 3: Finally, add the below onload event handler inside the <BODY> tag itself:

<body onload="Carousel()">

That's a wrap. Read on for important customization info.

Customizing the script

All changes to the script takes place in the code of Step 1, which is documented for the purpose. First, customize the 7 variables near the top of the script per the comments. Then, locate the <DIV> tag at the bottom of the code, which reads:

<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="371" height="227">
</div>

This is where things get interesting. You now need to change the width and height of the "placeholder.gif" image above using the preset formula:

placeholder width:
-4 sided: 1.42 * carousel image width + 3
-6 sided: 2 * carousel image width +4
-8 sided: 2.62 * carousel image width + 5
-12 sided: 3.87 * carousel image width + 7

placeholder height:
-carousel image height+2

In other words, depending on the number of sides your Carousel slideshow is set to, the width and height of the placeholder.gif image needs to change accordingly. In the demo, the slideshow is 8-sided, with images each having a dimension of "140" and "225". So the placeholder.gif is set to "371" (2.62*140+5) and "227" (225+2).

And that's it. FYI the above customization steps are repeated within the script for easy reference.