Carousel Slider any recommendations?

[stuk34]

I'm looking to display 4 monthly newsletter front page graphics in carousel slider format, scrolling around in either 360 carousel or a fixed left/right slider also allowing a link to the newsletter pdf to open in a new window.

Ideally, there could be as many as 12 issues to scroll left and right for the full year, but with just 4 available in the slider window
example:



Can't see anything in the catalogue that fits the bill....any thoughts?

[gwpriester]

Have a look at WOW Slider https://wow-slider.en.softonic.com/

If you go this route let us know because there is a way you have to integrate it into Xara.

[stuk34]

just downloaded Wow and tried adding html as a placeholder, but doesnt look as simple as that!

Any tips?

[Acorn]

I definitely would not use a Slider for this.

I set up a set of pages in a Horizontal Supersite with a gap of 5px.
Each page is designed to exactly hold one image. Do not have a page shadow.
I made it A4-scaled of 210x297px. Each can have any Xara effect, rollovers, links to a fresh page, ...
This alone overpowers a carousel.
I published this all to a sub-folder, newsletters.

In the main site, I created a Placeholder with body code: <iframe name="newsletters" width=100% height=100% src="newsletters/index.htm"></iframe>"
The placeholder width was 4 times the newsletter width plus a margin (e.g., 4 x 210 + 3 x 5 --> 855px); height was 297px.

Rough & ready demo: http://acorn.xara.hosting/sailtime/

Acorn

[gwpriester]

stuk34

After you create the slide show WOW Slider creates an index.html file. Inside the index.html file are designated sections that go in the Page > Body section and Page > Head section. Copy and paste from the index.html file into your Xara page that contains the slider.

WOW Slider also creates two folders, I think Engine and Data. These two files have to uploaded to the route directory where you publish your site.

And since the two snippets of code refer to index.html it is best to rename your home page, which in Website Properties > Page is index, to index.html so all your page files end in .html

Xara will say this is not a good idea. But it is fine.

[stuk34]

Thanks both,

Going to try both methods, appreciate your help and super quick responses

[letsgofishing]

I definitely would not use a Slider for this.

I set up a set of pages in a Horizontal Supersite with a gap of 5px.
Each page is designed to exactly hold one image. Do not have a page shadow.
I made it A4-scaled of 210x297px. Each can have any Xara effect, rollovers, links to a fresh page, ...
This alone overpowers a carousel.
I published this all to a sub-folder, newsletters.

In the main site, I created a Placeholder with body code: <iframe name="newsletters" width=100% height=100% src="newsletters/index.htm"></iframe>"
The placeholder width was 4 times the newsletter width plus a margin (e.g., 4 x 210 + 3 x 5 --> 855px); height was 297px.

Rough & ready demo: http://acorn.xara.hosting/sailtime/

Acorn

Interesting approach Acorn......

[stuk34]

All working as intended on the site live now:
https://www.thornton-steward-sailing...k/sailtime.htm

Thanks for your help

Just one question, when viewed on a tablet there are no iframe scroll bars on an Apple device....Is this due to iframes not being handled correctly by IOS? or is there a setting somewhere ive missed?

[Acorn]

All working as intended on the site live now:
https://www.thornton-steward-sailing...k/sailtime.htm
Thanks for your help
Just one question, when viewed on a tablet there are no iframe scroll bars on an Apple device....Is this due to iframes not being handled correctly by IOS? or is there a setting somewhere ive missed?

You're welcome.

The missing setting could just be scrolling = "auto" or scrolling = "yes".
BUT
HTML5 has deprecated 'scrolling' so you may need to replace it with style="overflow: visible;"

Acorn

P.S. You have an errant craft to the right of your page - an extra Oct 19 edition.

[Egg Bramhill]

Here's a very slightly different approach. No particular reason.

DEMO