How to create a scrolling slideshow

[siran]

First improvement. Replace the line

  slideElem.style.marginLeft=(-(curSlide*slideWidth+curSlidePos))+"px";

with these three lines

  var curWidth=slideWidth*((curSlidePos>0)?slideCount-slidesVisible:1);
  var offset=Math.sign(curSlidePos)*(1-Math.cos(curSlidePos/curWidth*Math.PI))/2*curWidth;
  slideElem.style.marginLeft=(-(curSlide*slideWidth+offset))+"px";

for a kind of ease-in/out movement.
Compare here

[roly]

Hi siran, when I click the Compare here link in your last post (#11) I get a static image, no scrolling.

Ciao

Roly

[siran]

Sorry for the inconvenience. Guess you are using IE. It doesn't support Math.sign I should have tested that before uploading...
So the code to use would be:

  var curWidth=slideWidth*((curSlidePos>0)?slideCount-slidesVisible:1);
  var offset=((curSlidePos<0)?-1:1)*(1-Math.cos(curSlidePos/curWidth*Math.PI))/2*curWidth;
  slideElem.style.marginLeft=(-(curSlide*slideWidth+offset))+"px";

I have updated the file. Please check again and hit CTRL + F5 to clear the browser cache.

[roly]

Hi siran, works just nice, thank you.

Ciao

Roly

[siran]

Here is another version. It allows multiple sliders on the same page.
Moved the code to page head code.
The placeholder code is now much smaller.
The placeholder height has to match the height of the content page.
Example placeholder code:

createSlider: slideshow.htm, 200, 12, 4, 250, 3, 15

The first part "createSlider:" may not be changed. It is needed to identify the placeholder.
The rest of the code are parameters separated by commas:
1. (slideshow.htm): filename of the sub-site to include in the slider
2. (200): width of a single slide
3. (12): number of slides (it is important that this matches the the real number of slides in the included sub-site)
4. (4) number of slides visible at a time (optional, the code will try to calculate this if only 3 parameters are given)
5. (250) time (in unit of ten milliseconds) between sliding (optional, default is 400)
6. (3) step right value (defines the speed of the slide to the next position) (optional, default 2)
7. (15) step left value (defines the speed of the slide back to start) (optional, default 10)
See online here.

[letsgofishing]

Hi Siran,
Many thanks for posting this.
I'm not sure where to export the "slides".htm file to. I created a folder called "slide test" and exported the slider there.
Many thanks,
Mike

[siran]

Hi Mike,
depending on what you file structure is you will have to change the first parameter if you are using the file from post 15 or the src="..." value if you are using the previous example.
So if your structure looks like this:

which assumes your main site is uploaded to the root and named index.htm and the slides are uploaded to the slidetest subfolder and the file is named slides.htm
you will have to change to src="slidetest/slides.htm" in the previous example
or the placehoder code to 'createSlider: slidetest/slides.htm, ..., ..., ..., ..., ..., ...' (without the quotes) in the example of post 15
I'd recommend to avoid spaces in path or file names.

[letsgofishing]

Many thanks Siran!