Step Carousel Wraparound & Validation

**dmwhipp** · 01-14-2014, 12:48 PM

Script: Step Carousel Viewer V1.9
URL: http://www.dynamicdrive.com/dynamici...epcarousel.htm

I've implemented this script for a client to feature their publications in the format they desired and have two questions:
1. Am I misunderstanding the wraparound feature? I would like the slideshow to go from the last slide to the first side in a circular manner, rather than reversing back to the first slide when the end is reached, if possible.
2. I'm getting a validation error at http://html5.validator.nu/ due to the script. This doesn't affect the function, but is something I'm trying to learn how to correct and obviously I'm doing something wrong.

Here is the page with the script: http://www.flimpact.org/5publications.html
Thanks,
Deborah

**Beverleyh** · 01-14-2014, 01:50 PM

The errors are from the DD copyright notices inside of <script> tags;

Code:

<script type="text/javascript" src="/scripts/stepcarousel.js">
/***********************************************
//* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
//* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
//* This notice must stay intact for legal use
/***********************************************/
</script>

You can convert them to an HTML comment though and still satisfy the copyright requirement while passing validation - like this;

Code:

<!-- 
Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) 
Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
This notice must stay intact for legal use
-->
<script type="text/javascript" src="/scripts/stepcarousel.js"></script>

**dmwhipp** · 01-14-2014, 02:20 PM

Thanks - the page passes validation now. Do you now if it's possible to set it up so the slideshow is continuous - meaning after the last slide the first slide appears?
Deborah

**vwphillips** · 01-15-2014, 06:40 PM

difficult for me to modify than script

but I could add the options you require to this one

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: visible; /*leave this value alone*/
width: 270px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
overflow:visible;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 260px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>


</head>

<body>

<input type="button" name="" value="Next" onmouseup="zxcStepCarouselVII.Next('mygallery',1);"/>
<input type="button" name="" value="Back" onmouseup="zxcStepCarouselVII.Next('mygallery',-1);"/>
<input type="button" name="" value="GoTo 0" onmouseup="zxcStepCarouselVII.GoTo('mygallery',0);"/>
<input type="button" name="" value="GoTo 1" onmouseup="zxcStepCarouselVII.GoTo('mygallery',1);"/>
<input type="button" name="" value="GoTo 2" onmouseup="zxcStepCarouselVII.GoTo('mygallery',2);"/>
<input type="button" name="" value="GoTo 3" onmouseup="zxcStepCarouselVII.GoTo('mygallery',3);"/>
<input type="button" name="" value="GoTo 4" onmouseup="zxcStepCarouselVII.GoTo('mygallery',4);"/>

<div id="mygallery" class="stepcarousel">
 <div class="belt">

  <div class="panel">
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
  </div>

  <div class="panel" >
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
  </div>

  <div class="panel">
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
  </div>

  <div class="panel">
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
  </div>

  <div class="panel">
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
  </div>

 </div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Step Carousel VII (15-January-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/


var zxcStepCarouselVII={

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud>0?1:-1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.n+ud);
   clearTimeout(o.to);
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud>0?1:-1;
  if (o){
   this.Pause(id);
   if (typeof(o.ary[n])=='number'&&n!=o.n&&!(n==0&&o.n==o.lgth)){
    n>o.n&&n!=0?1:-1;
    this.rotate(o,n);
   }
  }
 },

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   o.auto=false;
   clearTimeout(o.to);
  }
 },

 init:function(o){
  var id=o.CarouselID,ms=o.Animate,h=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null;
  if (s){
   var sz=0,clds=s.childNodes,c,z0=0
   s.style.width='30000px';
   p.style.overflow='hidden';
   o.ary=[];
   for (;z0<clds.length;z0++){
    if (clds[z0].nodeType==1){
     clds[z0].style.position='absolute';
     clds[z0].style.left=sz+'px';
     o.ary.push(sz);
     sz+=clds[z0].offsetWidth;
    }
   }
  }
  s.style.width=sz+'px';
  c=s.cloneNode(true);
  c.style.left=sz+'px';
  c.style.top='0px';
  s.appendChild(c);
  o.ary.push(sz);
  o.id=id;
  o.s=[s,'left'];
  o.lgth=o.ary.length-1;
  o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
  o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
  o.ud=1;
  o.n=0;
  this['zxc'+id]=o;
  typeof(srt)=='number'&&srt>20?this.Auto(id,srt):null;
 },

 rotate:function(o,a){
  this.Pause(o.id);
  o.auto=a===true;
  var n=o.auto?o.n+o.ud:a,f=-o.ary[o.n];
  if ((n>o.lgth&&o.ud>0)||(n<0&&o.ud<0)){
   f=o.ud>0?0:-o.ary[o.lgth];
   n=o.ud>0?1:o.lgth-1;
  }
  this.animate(o,o.s,f,-o.ary[n],new Date(),o.ms);
  o.n=n;
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[3]=t;
   a[0].style[a[1]]=t+'px';
   o.auto?oop.Auto(o.id,o.h):null;
  }
 }


}

zxcStepCarouselVII.init({
 CarouselID:'mygallery', // the unique ID name of the carousel parent DIV.         (string)
 Animate:1000,           //(optional) the step duration in millisec.               (number, default = 1000)
 AutoHold:1500,          //(optional) the auto rotation 'hold' delay in millisec.  (number, default = Animate*4)
 AutoStart:2000          //(optional) the auto rotation 'start' delay in millisec. (number, default = no auto start)
});

/*]]>*/
</script>
</body>

</html>

**dmwhipp** · 01-15-2014, 07:28 PM

Hi Vic,
Thanks so much, but after seeing it live, the client actually decided they didn't want it to loop since visitors might not realize they had reached the end of the list. This is a great script and was pretty easy to customize to their exact specs - thanks for creating this

Deborah