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
Bookmarks