Full Width HD Xara Slider - Supports 4k Displays In this example, we have a 5-slide vertical rotation slider - HD width at 1920px (w) x 270px (h), it is exported with Scale-to-Fit Width, maximum set at 3840px (UHD width). The first page has a filename other than “index.htm”. In this case “bgslider.htm”. This supersite is published into the same directory as the site in which it is to appear. Effectively it can be a template for any slider and used in conjunction with Xara’s Export Option, Scale-to-fit-Width. Full-width is accomplished without any image distortion through a ‘responsive iframe’ inserted into the main page using a placeholder (with the code below). The corresponding CSS styling is inserted into the Website HTML (head). Any number of placeholders can be added on top of slider, including additional sliders, standard text, jpeg images, with PNG/SVG images added using placeholders. Automation of slider is achieved using additional code (the same as that demonstrated with these purpose-designed Xara Nivo replacement sliders: https://initiostar.co.uk/demo/zNivo/ https://initiostar.co.uk/demo/Overlay/ 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 2560px (w) x 360px (h) - 2560px (w) fills the width of a 4K screen magnified by 150%, 360px (h) retains the aspect ratio. <div class="container"> <iframe class="responsive-iframe"src="bgslider.htm"></iframe> </div> The most important user input 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 width by height 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 (such as this example) becomes too small in a variant to have any visual impact. In which case, it can be replaced with a static image overlay or (say) a portrait style slider of the designer’s choice. Alternatively, a designer can wrap the style within an @media rule to either display none, or to invoke another slider in portrait format. The @media rule would be consistent with the designer’s variant width choices for mobile, tablet and desktop. 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 sliding is not possible.