Crossfade Slider

A trip to Lista, Norway

Crossfade Slider

There is some CSS on the Element pane for the element 'x-fade', and you will find  something like this: '.x-fade li:nth-child(6) {animation: xfade 24s 0s 5;}' (without the inverted commas).
The 'x-fade' is the class name of the list in which the images are sitting.  'li:nth child(6) is referring to the 6th image, which is actually the first to be shown.
The actual animation (in the curly brackets is telling you that the whole cycle will take 24 seconds and it has to be the same for all images, and this particular image will start at 0 seconds. This may be different for each image, here  they start with an approx. 4 seconds' interval.
The 3rd number, 5, denotes how many times the cycle is supposed to run. It can be replaced by any other number, or by 'infinite' (without the inverted commas) if you want to have it running all the time. The value must be the same for all images.

The keyframes are saying how fast the fading is to happen. You can play with the %-age, add more if you like.
If you don't need the banner overlay, you may grab the second download. This doesn't help much for IE11 users though. For those still on IE11 the Orbit slider would be a better option.

The third option is the same slider in full width size.

Placeholder Picture

Download this component

Placeholder Picture

Download this component without the banner

Placeholder Picture

Download the full width component