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;
}

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Using Oxygen 2.0 – I had weird results with the unslider * selector so I prefer to use this css:

    .unslider,
    .unslider-horizontal,
    .unslider-wrap,
    .unslider-wrap > li,
    .unslider-active,
    .ct-slider,
    .ct-slide {
    height:100% !important;
    padding:0 !important;
    }
    .unslider-arrow {
    margin:25px;
    }

    Cheers,
    C.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: