Background Slideshow in Oxygen

This tutorial provides the steps to use the Slider element in Oxygen as a full-screen auto-playing background slideshow with fading images with a div overlayed on the center in the middle.

Screenshot of the Structure tree for your reference:

Step 1

Edit your entry or template with Oxygen. Do not inherit from any other template since we want to start with a totally blank page.

Add a Div.

Set the Height to 100vh and Position to relative.

Add a Slider element inside the Div.

In the Configuration area, uncheck “Show Arrows” and “Show Dots”. Select “Autoplay”. Set the Animation to fade.

Select the Slide elements and set your desired images as background. Set Background Size to cover and Background Repeat to no-repeat.

Set Height to 100%.

Step 2

Add another Div inside the parent Div. This is our overlay div.

Add your desired elements inside like say a Heading, Text and a Button.

Set Position to absolute with 50% Top and 50% Left values.

In the Custom CSS of this Div, add

-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;

Set Width to 800px, a Background color of say rgba(255,255,255,0.8) for a transparent white background.

You might also want to set it a padding of say, 80px at top and bottom and 40px at left and right.

Also, set the Display as flex and Align Items and Justify Content to center.

Step 3

Select Body in the Structure tree and add a Code Block element.

PHP & HTML:

<?php
    // echo "hello world!";
?>

CSS:

.unslider,
.unslider * {
    height: 100%;
}

.unslider {
    padding: 0;
}