Creating your own image sliders within Xara

[Egg Bramhill]

Many of the questions asked on TG refer to image slider widgets & how can they be adjusted/resized and various options added or removed.

This is a way to create your own, very versatile, bespoke sliders using only Xara and no widgets. For some reason this video won't display fullscreen within TG. I recommend clicking the YouTube icon & view fullscreen at 1080 HD



This is the code that siran supplied that makes it all work. The code replaces the need for buttons to move to the next slide and instead does so after a set time period. It should be placed within the Website or Page Head meta-text. Change sDispTimes=[4]; to sDispTimes=[x]; to change the display time of each slider image.

<script>
sDispTimes=[4];
function sswitch(){
var n=xr_curp+1;
if (n==xr_spapn)n=0;
xr_spapp(n);
setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>
<style>
.zoomThis{
animation: slideZoom linear 10s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-ms-animation: slideZoom linear 10s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes slideZoom{
0% { transform: scale(1.00); }
100% { transform: scale(1.50); }
}

@-ms-keyframes slideZoom {
0% { -ms-transform: scale(1.00); }
100% { -ms-transform: scale(1.50); }
}
</style>

Attached are the two xar files used to create the simple slider. They must be exported and or published to the same folder to work.

Also attached are the Super Slider xar files.

Link to simple slider example.

Link to super slider example.