CSS Responsive Wrap Slideshow using CSS Variables

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.

Attachment 132911

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

Looking very good, Acorn. Responsive, no delays.

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

Quote:

---

Originally Posted by Egg Bramhill

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

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.

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

Quote:

---

Originally Posted by 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.

---

Egg, sorry to hear.

I have tried https://shared.xara.com/uM6ngFJKEi in all mine and all work save IE (expected) and ToR (no main image but it pauses).

The whole reason for a CSS-only implementation was to avoid browsers choking on JavaScript so it is annoying.

Are you adjusting the CSS as that could cause the failure too.

Acorn

Okay, I did adjust the xar. I enlarged the large Placeholder for displaying the 'Slideshow' to fit the whole page and brought to front. Then on preview this covered all the page content. However there was two slideshow controls, one of which I noticed, the other I missed.

The one I was trying to pause was in fact the mobile variant pause button, which probably did work but was behind the large Placeholder for displaying the 'Slideshow' so remained unseen. On retest I did notice the large Placeholder for displaying the 'Slideshow' pause/play button top left that worked perfectly. My bad! Of course something that wouldn't be present on a two variant page :)