How to create a scrolling slideshow

**rikkoshea** · 03 August 2016, 11:24 PM

Hi, am using WD11P and I would like to use a 'scrolling slideshow' on my website. The type of effect that I would like to create is, for example, one that appears towards the top of this website's home page: https://httlvn.org/ which scrolls completely across the page. Can this effect be achieved (in a simple way) using Xara Web Designer, or perhaps I need to use other software? I thought I may have asked about this topic before (apologies if that's the case) but I can't find it now. Any ideas appreciated. Thanks, Rikko

**siran** · 04 August 2016, 03:32 AM

Can't open that website.
Maybe you can find something in this thread.
I'm sure there is another thread about this, but can't find it right now.

**rikkoshea** · 04 August 2016, 12:11 PM

Hi Siran, thanks for the reply however I'm afraid that looks too advanced for my skills. Also it's maybe not quite what I was seeking. It's a pity you can't open that website (opens simply with a click for me? Perhaps it might work better with a question mark at the end, ie: https://httlvn.org/? There are some 'bad' websites with similar names that are probably hacked by the Vietnamese government who often block any sites if they don't agree with the content, such as Christian based sites). But anyway, that slideshow there is a long sequence of photos/graphic items, which scroll after a short delay, displaying 5 equally sized images at a time, with captions, etc appearing like a bar extending fully across the webpage. Thanks again.

**Egg Bramhill** · 04 August 2016, 07:50 PM

I can see the site, it's humungously large. I can also see the image scroller you're refering to, but there's no scroller in Xara to match this.

**roly** · 04 August 2016, 10:28 PM

Hi, I do not know where that slider comes from but in the attachment you will find something that resemble but it is not the same. What I did is brought in the nivo slider from the design gallery, resized the width to 200 px, changed the effect to number 11 and the delay to 2 seconds and then copied and pasted 4 times. I also put in the 3 nivo slider controls provided by either Egg or Acorn I think to remove the controls. I did not change the pictures, double click a slider and follow the instructions.

Let us know if this works for you

Ciao

Roly

**roly** · 04 August 2016, 11:47 PM

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** · 05 August 2016, 08:04 AM

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:

Code:

<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.