About Scrolling Picture with Touch

[notrino]

Hello,

I'm a Xara Web Designer Premium user. You know, mobile users are using fingers for horizontal flowing images. So I want to add a widget (with 5-6 pictures) for it. But I didn't find any widget sample from Online Content Catalogue. A lot of widgets including horizontal flowing the images with touch the "arrows" or touch the "numbers". But I don't want to touch any arrow or number. I want to only dragging the picture. Thanks.

[Initiostar]

Hello,

I'm a Xara Web Designer Premium user. You know, mobile users are using fingers for horizontal flowing images. So I want to add a widget (with 5-6 pictures) for it. But I didn't find any widget sample from Online Content Catalogue. A lot of widgets including horizontal flowing the images with touch the "arrows" or touch the "numbers". But I don't want to touch any arrow or number. I want to only dragging the picture. Thanks.

There are a variety of different sliders in the demo here > https://initiostar.co.uk/demo/zNivo/ - you must have v18 or above to be able to use the touch scroll/swipe feature.

I have adapted the Simple Slider to have a horizonal scroll without controls (for a mobile/ tablet). The slider does have two variants that transition from desktop to mobile; you could delete the desktop variant or retain it.

Simple Slider - Horizontal Scroll >Simple-Slideshow-Page-Scrolling Template.xar

For the slider, you would create a separate Xara file with the first page filename anything other than "index" > you publish this document to the same directory as your main website.

Thereafter you call it through a placeholder (same dimensions as your slider page) using an iframe:

<iframe title="slider-crossfade" src="simple-slider-crossfade.htm" name="simple-slider-crossfade" height="100%" width="100%" style="border:none;"></iframe>

The source (src) is the same filename as that given to your first page in the slider.

When you preview the slider in your main website (it will suggest it cannot find it), but once both documents are published to the same directory it correctly appears.

There are lots of different ways to do this and many have been previously covered.

[Acorn]

Faith, not quite sure why you want this only for mobile touch but try: http://acorn.xara.hosting/HScroll/.

It should not display any scrollbars but it is at the moment and some images are missing.
I am wrestling with it - sorry.
UPDATE - now working - the images are just numbers here but it works with anything really.

On a non-touch device you click on the visible image and then use the left/right arrows.

Basically, I have an H-scrolling site with side-by side images, one per page, and the viewer is a Placeholder IFRAME that is set for one image/page width.

For the images:

• Create a Scrolling Horizontal Website with pages 640x640px with no page gap.
• Fill each page with a 640x640ps image or anything you want.
• Name the first page, slide01 [ignore the Xara complaint]; label the next slide02 and so on.

For the viewing page:

• Add a Placeholder 640x640px with Body code:

<div id="container">
  <iframe src="slide01.htm"></iframe>
</div>

• Include styling;

<style>
:root {
  --wide: 640px;
  --deep: 640px;
}
#container {
  width: var(--wide);
  height: var(--deep);
  overflow-y: hidden;
}
iframe {
  width: var(--wide);
  height: calc(var(--deep) + 20px);
}
</style>

• The extra 20px for the IFRAME height gets rid of the vertical scrollbar.
• Scrolling is needed so you cannot set scrolling="no".
• The Xara Placeholder size is not important but it is sensible to set it to the expected size.
• For your different image dimensions, change the :root values, --wide & --deep; all images ideally should be the same width.
• If you have differing image sizes, centre and scale on the page to fit.

Acorn

[Acorn]

I have included the detail to drive the presented image from the parent page.
The IFRAME needs name="slider" included.
The Links are set to open in 'slider' and as they are invoking a scrolling website, they need to invoke Xara anchoring, e.g., slide06 has a page address of slide01.htm#xr_page_slide06.

Not relevant to the OP ask but useful to embellish a fuller static slider.

Both these files need to be exported/published to the same folder:

• Xara - Sliders.xar
• Xara - Slide Box.xar

If you just Preview them, they are placed in separate folders by Xara.

Acorn

[Egg Bramhill]

Works well but only with a tap:
LINK

[Acorn]

Works well but only with a tap:
LINK

Egg, I like it but the OP asked for a drag.

I'm guessing that you split a next and previous call across the middle of each image.

Acorn