slidesjow_eingabe.php

gistfile1.txt

<?php
$ylink = [['name' => 'News', 'table'=>'rex_news', 'column' => 'title']];
$auswahl = new Mform();
$auswahl->addFieldsetArea('Settings');
$auswahl->addSelectField(16, array(1=>'Ja',2=>'Nein'), array('label'=>'Autoplay'));
$auswahl->addSelectField(18, array('slide'=>'slide','fade'=>'fade','scale'=>'scale','pull'=>'pull','push'=>'push'), array('label'=>'Übergangs-</br>effekt'));
$auswahl->addSelectField(19, array('ja'=>'Ja',2=>'Nein'), array('label'=>'Navigations-</br>punkte anzeigen'));
$auswahl->addSelectField(20, array('ja'=>'Ja',2=>'Nein'), array('label'=>'Höhe wie Bildschirm'));
echo $auswahl->show();
?>
<?php
$id = 1;
$mform = new MForm();
$mform->addFieldsetArea('Medien');
$mform->addMediaField(1, array('label'=>'Bild / oder Video (MP4)'));
$mform->addCustomLinkField("$id.0.1", ['label' => 'Link', 'data-intern'=>'enable', 'data-media'=>'disable', 'data-extern'=>'enable', 'ylink' => $ylink]);    
$mform->addTextField("$id.0.title", array('label'=>'Titel', 'class'=>'uikit_textfield'));
$mform->addTextField("$id.0.text", array('label'=>'Text', 'class'=>'uikit_textfield'));
$mform->addSelectField("$id.0.posText", array('uk-position-bottom-center uk-text-center'=>'Unten','uk-position-bottom-left uk-text-left'=>'Unten Links','uk-position-bottom-right uk-text-right'=>'Unten Rechts','uk-position-top uk-text-center'=>'Oben','uk-position-top-left'=>'Oben Links','uk-position-top-right uk-text-right'=>'Oben Rechts','uk-position-center uk-text-center'=>'Mittig','uk-text-left uk-position-center-left'=>'Mittig Links','uk-text-right uk-position-center-right'=>'Mittig Rechts'), array('label'=>'Position des Text', 'class'=>'uikit_textfield'));

echo MBlock::show($id, $mform->show()); 

slideshow_augabe.php

<?php
if (!function_exists('checkUrl')) {
    function checkUrl($url)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) !== false) {
            if (file_exists(rex_path::media($url))) {
                $url = rex_url::media($url);
            } elseif (is_numeric($url)) {
                $url = rex_getUrl($url);
            }
        }
        return $url;
    }
}

$gallery_output = '';
$i = 0;

// INIT VARIABLES
$set_autoplay = $autoplay = $type = $values = $id = $text = $title = $animation_type = $nav = $show_navi = '';

// SET VARIABLES
$type = 'REX_VALUE[15]';
$autoplay = 'REX_VALUE[16]';
$ratio = rex_escape('REX_VALUE[17]');
$animation_type = 'REX_VALUE[18]';
$show_navi = 'REX_VALUE[19]';

$set_autoplay = $autoplay == 1 ? 'true' : 'false';

if ($autoplay == 2 || rex::isBackend()) {
    $set_autoplay = 'false';
}

$values = rex_var::toArray("REX_VALUE[1]");
$nav = 0;

// DO THE MAGIC
$ratio = '16:5';
$view_height = '';
if (rex::isFrontend() && 'REX_VALUE[20]' !== '2') {
    $view_height = ' uk-height-viewport="min-height: 300"';
    $ratio = 'false';
}

$nav = 0;
$gallery_output .= '
    <div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow="autoplay-interval: 6000; autoplay: ' . $set_autoplay . '; animation: ' . $animation_type . '; pause-on-hover: false; ratio:' . $ratio . '">
        <div class="uk-slideshow-items"' . $view_height . '>';

foreach ($values as $value) {
    $link = $value['1'];

    if ($link != '') {
        $link = checkUrl($link);
        $link_prefix = '<a href="' . $link . '" class="modal-trigger" uk-toggle="target: #ajax-modal" data-id="' . $link . '" aria-expanded="false">';
        $link_suffix = '</a>';
    } else {
        $link_prefix = $link_suffix = '';
    }

    $picture = rex_escape($value['REX_MEDIA_1']);

    if (rex_plyr::checkMedia($picture)) {
        $media = '<video class="uk-width-1-1" src="/media/' . $picture . '" preload="none" uk-video autoplay loop muted playsinline uk-cover></video>';
        $kenburns = '';
    } else {
        $media = '<div class="uk-position-cover uk-animation-kenburns"><img data-src="/media/slide_item/' . $picture . '" uk-img alt="" uk-cover></div>';
        $kenburns = ' uk-animation-kenburns ';
    }

    $text = rex_escape($value['text']);
    $text = ($text !== '') ? '<h2 class="tt uk-text-lighter custom_textbg">' . $text . '</h2><br><br>' : '';

    $title = rex_escape($value['title']);
    $title = ($title !== '') ? '<h1 class="tt uk-text-bold custom_textbg" uk-slideshow-parallax="x: 200,0,0;">' . $title . '</h1><br>' : '';

    $textPos = rex_escape($value['posText']);

    $gallery_output .= '
        <div>
            ' . $link_prefix . $media . '
                <div class="' . $textPos . ' uk-position-medium uk-width-1-2 uk-padding-bottom uk-light" uk-scrollspy="target: > .tt ; cls: uk-animation-fade; delay: 500">
                    ' . $title . '
                    ' . $text . '
                </div>
        </div>' . $link_suffix;

    $nav++;
}

$gallery_output .= '</div>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>';

if ($show_navi == 'ja') {
    $gallery_output .= '
        <div class="uk-position-bottom-center uk-position-small">
            <div class="uk-dotnav uk-flex-center uk-margin">';

    for ($x = 0; $x < $nav; $x++) {
        $gallery_output .= '
                <div uk-slideshow-item="' . $x . '"><a title="Item ' . $x . '" href="#">…</a></div>';
    }

    $gallery_output .=  '
            </div>
        </div>';
}

$gallery_output .= '</div>';

echo $gallery_output;
?>

slideshow_custom_css.css

h1.custom_textbg {
  font-size: 2rem;
}

h2.custom_textbg {
  font-size: 1.6rem;
}

h1.custom_textbg,
h2.custom_textbg {
  backdrop-filter: blur(20px);
  transition: all .5s ease-in-out;
  display: inline;
  margin: 0;
  clear: both;
  padding: .2rem .5rem;
  line-height: 1.8;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-transform: uppercase;
  color: #008b58;
  background-color: rgba(255, 255, 255, .75);
}

/* Media query for max-width: 960px */
@media (max-width: 960px) {
  .uk-slideshow-items {
    min-height: 450px !important;
    font-size: 0.8rem;
  }

  h1.custom_textbg {
    font-size: 1.5rem;
  }

  h2.custom_textbg {
    font-size: 1.2rem;
  }
}