<video width="800" height="450" autoplay loop muted playsinline id="icecream-video"><source src="https://initiostar.co.uk/assets/Icecream_Video.mp4"></video>
Icecream Video Editor - Example Photo Slider - Switch to Xara
This example has four photos, each shows with a duration of 5s and has a ‘move right motion’ effect. A picture heading fades in and out for each photo. This
works for a relatively small number of photos/pictures, but the the exported MP4 file here at 137mb is significant for the effect achieved.
A similar effect can be achieved with Xara which is easier to update and maintain as a simple slider. In this approach one creates what is another Xara website that
is published to the same directory as the main site, but with a file name such as “slider”. The upside here is you can have any additional animations on each page
and custom controls should the designer want to add these. The dimensions of the slider are the designers choice and one can add a mobile variant to the design
as necessary. The page size for the slider in this example is 1280px(w) x 720px(h) [ 16:9 standard ratio ]
Auto-start requires just ONE line of code! and has just one variable which is the duration for each side (5s in this example).
The example above is a standard Xara website which can be downloaded here: https://initiostar.co.uk/assets/Xara_Icecream.xar
This is a website within a website concept and the designer is simply embedding the slider website in their main website. The designer would publish this slider
website to the main website directory using a placeholder, with the slider page height and width ( proportionately scaled as required):
<iframe title="Slider" src="slider.html" name="Slider" height="100%" width="100%" style="border:none"></iframe>
Where the designer has more than one slider per website, each must be published with a different first page file name e.g. slider1, slider 2, slider3,…..
The required code to auto-start the slider will be found in the website HTML body of the Slider.
