В этом руководстве представлены шаги по использованию элемента Slider в Oxygen в качестве полноэкранного слайд-шоу с автоматическим воспроизведением фонового изображения с исчезающими изображениями и div, наложенным в центре посередине.
Скриншот дерева структуры для справки:
Шаг 1
Отредактируйте свою запись или шаблон с помощью Oxygen. Не наследуйте ни от какого другого шаблона, так как мы хотим начать с абсолютно пустой страницы.
Добавьте Div.
Установите высоту на 100vh и положение relative.
Добавьте элемент Slider внутри Div.
В области «Конфигурация» снимите флажки «Показать стрелки - Show Arrows» и «Показать точки - Show Dots». Выберите «Автовоспроизведение - Autoplay». Установите анимацию на затухание - fade.
Выберите элементы слайда и установите нужные изображения в качестве фона. Установите для параметра «Размер фона - Background Size» значение «Обложка - cover», а для параметра «Повтор фона - Background Repea» — значение «Без повтора - no-repeat».
Установите высоту - Height на 100%.
Шаг 2
Добавьте еще один Div внутри родительского Div. Это наш оверлейный div.
Добавьте нужные элементы внутри, например, заголовок - Heading, текст - Text и кнопку - Button.
Установите Position на абсолютное значение со значениями 50% сверху (50% Top) и 50% слева (50% Left).
В пользовательском CSS (Custom CSS) этого Div добавьте
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10;
Установите ширину - Width на 800 пикселей, цвет фона, скажем, rgba(255,255,255,0.8) для прозрачного белого фона - transparent white background.
Вы также можете установить отступ - padding, скажем, 80 пикселей сверху и снизу и 40 пикселей слева и справа.
Кроме того, установите Display как flex и Align Items и Justify Content по центру.
Шаг 3
Выберите Body в дереве структуры и добавьте элемент Code Block.
PHP и HTML:
<?php
// echo "hello world!";
?>
CSS:
.unslider,
.unslider * {
height: 100%;
}
.unslider {
padding: 0;
}