Сайты на заказ > Сайтостроение > Фоновое слайд-шоу в Oxygen Builder

Фоновое слайд-шоу в Oxygen Builder

В этом руководстве представлены шаги по использованию элемента Slider в Oxygen в качестве полноэкранного слайд-шоу с автоматическим воспроизведением фонового изображения с исчезающими изображениями и div, наложенным в центре посередине.

Фоновое слайд-шоу в Oxygen Builder

Видео на Rutube

Скриншот дерева структуры для справки:

Фоновое слайд-шоу в Oxygen Builder

Шаг 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;
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Copyright © 2021, GuruSite24. Копирование материалов сайта запрещено.
menu-circlecross-circle