How to create a scrolling slideshow

[roly]

Hi, go to the following website and look at demo 1 & 5, perhaps this is what you are looking for. http://www.menucool.com/jquery-slider As to whether it works with Xara, I do not know, maybe someone else can comment.

Ciao

Roly

[siran]

Both links now work, no idea what was wrong last time.

Here is a solution using an iframe.
The content is a horizontally scrolling supersite with a gap of 0 pixels. (This is a separate document and has to be published to the same folder as the main document.)
At the main page there is a placeholder with this code at the body:

<div style="width:100%; height:100%; overflow: hidden;">
<iframe id="slide-test" src="slideshow.htm" frameborder="0" width="2418" height="130"></iframe>
</div>
<script>
var slideCount=12,
    slidesVisible=4,
    slideWidth=200,
    slideDelayCount=400,
    slideStepRight=2,
    slideStepLeft=10,
    curSlideDelayCount=0,
    curSlidePos=0,
    curSlide=0,
    slideElem=document.getElementById("slide-test");
setInterval(function(){
 if(curSlideDelayCount==slideDelayCount){
  if(curSlidePos>0){
   curSlidePos=Math.max(curSlidePos-slideStepLeft,0);
  }else{
   if(curSlidePos<0){
    curSlidePos=Math.min(curSlidePos+slideStepRight,0);
   }else{
    if(curSlide+slidesVisible<slideCount){
     curSlide++;
     curSlidePos=-slideWidth;
    }else{
     curSlide=0;
     curSlidePos=(slideCount-slidesVisible)*slideWidth;
    }
   }
  }
  if(curSlidePos==0)curSlideDelayCount=0;
  slideElem.style.marginLeft=(-(curSlide*slideWidth+curSlidePos))+"px";
 } else {
  curSlideDelayCount++;
 }
},10);
</script>

Explanation:
The slides are published to a file slideshow.htm, this filename has to be set in the iframe code ( src="slideshow.htm" ).
In my example there are 12 slides (pages in the slideshow file) of 200 pixels width (giving a full width 0f 2400pixeld) and 130 pixels height.
These values define the size of the iframe, but I had to add some pixels (18 to be precise) to the width to avoid scrollbars.
The page and placeholder width in the main document is 800 pixels. This leads to 4 slides visible at a time.
So this all leads to the variables in the code having to be set:
slideCount=12
slidesVisible=4
slideWidth=200
To influence the scroll speed you can optionally set these variable values:
slideDelayCount=400
slideStepRight=2
slideStepLeft=10
Have a look at the result here.
If you place links on the content you will have to set the option 'Open link' to 'Parent frame (_parent)' in the link properties.

[Egg Bramhill]

Nice solution siran

[roly]

Hi siran, wow, that is a real solution, not a plaster job like I submitted.

Ciao

Roly

[siran]

Thank you Egg and Roly.
Its a quick adaption of the method from the other thread. The ID is hard coded here, so there is potential for improvements.

[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