In this example, we have a 5-slide crossfade slider, width set at 1920px (w) x 270px (h). It has been exported with Scale-to-Fit Width maximum set at 3413px. An explanation on how to calculate the maximum width is explained further down the page. To achieve an automated transition from one side to another can be accomplished by adding a few lines of code into slider website HTML(body) of the website slider:<script>setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},6000);</script>The transition time (in milliseconds) between slides can be changed as required.The slider is created as a separate Xara document and can accommodate any standard Xara features on each slide. The first page of the slider document has a filename other than “index.htm”. In this case “simple-slider-crossfade.htm”. and is exported with a transition of the user’s choice. The file is published into the same directory as the main site in which it is to appear. A mobile variant for the slider can be added in a different size format - in this example the mobile page has a width of 540px and a height of 540px. For this to work correctly when the slider is embedded in the main website, the main site MUST have the same width mobile variant. This ensures when you apply “Scale-to-fit-Width” the variants display correctly. To embed the slider into the main website requires a simple iframe, but to ensure it always appears full width in any browser requires a some extra code, sometimes referred to as a ‘responsive iframe’. The code below (using the basic maths described) ensures that a slider (up to a 5k browser width) should always fill the browser width.CSS styling for the responsive iframe is inserted into the Website HTML (head). INSERT INTO WEBSITE HTML (head)<style>.container { position: relative; width: 100%; overflow: hidden; padding-top: 14.06%; /* Slider Height divided by Width - Aspect Ratio */ z-index: -1; /*The index set to “-1” ensures that any objects or additional Xara placeholders are visible*/}.responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none;}</style>INSERT INTO A PLACEHOLDER (ON THE PAGE) using a rectangle 3413px (w) x 480px (h) - add the following code:3413px (w) fills the width of a 5K screen magnified by 150%, 480px (h) retains the aspect ratio for the 1920px(w) x 270px(h) original slider.<div class="container"> <iframe class="responsive-iframe"src="simple-slider-crossfade.htm"></iframe></div>The Placeholder could be made ‘sticky’ to retain the slider in its position (usually at the top of the page).The mobile variant has a simple iframe (where in this example the mobile placeholder is 540px(w) x 540px(h):<iframe title="slider-crossfade" src="simple-slider-crossfade.htm" name="simple-slider-crossfade" height="100%" width="100%" style="border:none;"></iframe>The most important user input for the desktop variant is the “padding”: This is the variable that maintains the correct aspect ratio for the incoming slider and ensures images are not distorted from the original slider. In the example here, the incoming slider is 1920px (w) x 270px (h); divide the height by the width for the percentage 14.06%.The embedded slider works across all variants, but a designer may chose to prevent the slider from transitioning to a variant where the design becomes too small in a variant to have any visual impact. In which case, it can be replaced with a static image.For comparative visualisation a user can compare the ORIGINAL SLIDER with the embedded slider Because the embedded slider is NOT VISIBLE until published to its server, previewing the working slider does not render the slider.An alternative to this approach is to use one of the many third party sliders such as the WOW slider with a minor change to the associated CSS.Demonstration: https://initiostar.co.uk/demo/wow-standard/