CSS Responsive Wrap Slideshow using CSS Variables

[Acorn]

Using only CSS in this Slideshow, you get automatic Thumbnails, a hover pop-up, a click to picture action and of course the slideshow itself.

To build your own:

• You add your large pictures into a !Slides layer.
• You given them all the same Image Filename of 'slide' - Xara increments them for you.
• Copy and Paste the Slideshow Setup & Slideshow Placeholders into you design.
• Tweak the Slideshow Setup settings; usually just the width and height.
• Resize the Slideshow.
• Finally copy the CSS of the example Web properties > Page > HTML body (code) into your design in the same area.

In the example file, the pictures are 1280px wide @192dpi so fairly high resolution.

CSS Responsive Wrap Slideshow using CSS Variables - modded from Stu Nicholls.xar

It is one of the few sliders I have worked on that do not slow down the browser or computer. Lighthouse Performance is a wonderful 100%.
I normally despair at overloaded index pages that take forever to run a slideshow that usually adds nothing to the presentation.

Acorn

[Boy]

Looking very good, Acorn. Responsive, no delays.

[Egg Bramhill]

I can download the xar but it wont open in XDP+ Acorn ???

[Acorn]

I can download the xar but it wont open in XDP+ Acorn ???

Egg, I have just downloaded it from my TG link above.
It opens and previews fine.

I assume you've just had XPro+v22.3?
Did you Run as Admin after a cold boot?

Here is a demo: https://shared.xara.com/uM6ngFJKEi

Acorn

[Egg Bramhill]

Okay Acorn,

I D/L'ed it and it still wouldn't open. Using v22.3 which I loaded to test the import data into tables. Running as Admin.

However after a reboot it opens fine now.

Looks sweet, I'll give it a trial tonight.

[Egg Bramhill]

Hello Acorn, just been looking at this in more depth and I can't get the play/pause to work in any browser.