<?php header('Access-Control-Allow-Origin: *'); ?>
<?php
if (TL_MODE == 'FE') {
$GLOBALS['TL_CSS'][] = 'files/base/layout/css/elements/custom-elements/ce_rsce_contentslider.min.css|static';
}
?>
<?php
if (!isset($this->fixed_image) && $this->element_type == 'is_buttons') {
$this->{"fixed_image"} = "";
}
?>
<div <?php echo $this->cssID; ?> class="content--element <?php echo $this->class; ?>">
<div class="ce--inner <?php if ($this->is_fullwidth): ?>is-fullwidth<?php endif; ?> <?php if ($this->nav_position == 3 || $this->nav_position == 4): ?>is-vertical<?php endif; ?>">
<?php if ($this->nav_position == 1 || $this->nav_position == 2 && ($this->headline || $this->subline || $this->topline)): ?>
<div class="ce--headline container"
data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
<div class="">
<?php if ($this->topline) : ?>
<span class="ce--topline"><?php echo $this->topline; ?></span>
<?php endif; ?>
<?php if ($this->headline) : ?>
<<?php echo($this->hl); ?>>
<?php echo($this->headline); ?>
</<?php echo($this->hl); ?>>
<?php endif; ?>
<?php if ($this->subline) : ?>
<span class="ce--subline"><?php echo $this->subline; ?></span>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="ce--contentslider"
data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
<div class="<?php if (!$this->is_fullwidth): ?>container<?php else: ?>is-fullwidth<?php endif; ?> ce--inner">
<?php if ($this->nav_position == 1): ?>
<div class="mt-3 mb-3 container horizontal content-slider--nav d-none d-md-block content-slider--nav_<?= $this->id; ?>">
<ul>
<?php foreach ($this->elements as $i => $nav) : ?>
<li <?php if ($i == 0 && $this->element_type == 'is_slider'): ?>class="active"<?php endif; ?>>
<?php if ($this->element_type == 'is_slider'): ?>
<span data-slide="<?= $i; ?>">
<?= $nav->slide_nav_text; ?>
</span>
<?php elseif ($this->element_type == 'is_buttons'): ?>
<a href="<?= $nav->link_url; ?>"
<?php if ($nav->link_newtab): ?>target="_blank"<?php endif; ?>>
<?= $nav->slide_nav_text; ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<div class="<?php if ($this->nav_position == 3 || $this->nav_position == 4): ?>row<?php endif; ?> <?php if ($this->nav_position == 4): ?>flex-row-reverse<?php endif; ?>">
<?php if ($this->nav_position == 3 || $this->nav_position == 4): ?>
<div class="col-12 col-md-6">
<div class="nav-column half-container pt-1 pb-1 pt-lg-5 pb-lg-5">
<?php if ($this->headline || $this->subline || $this->topline): ?>
<div class="ce--headline"
data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
<div class="">
<?php if ($this->topline) : ?>
<span class="ce--topline"><?php echo $this->topline; ?></span>
<?php endif; ?>
<?php if ($this->headline) : ?>
<<?php echo($this->hl); ?>>
<?php echo($this->headline); ?>
</<?php echo($this->hl); ?>>
<?php endif; ?>
<?php if ($this->subline) : ?>
<span class="ce--subline"><?php echo $this->subline; ?></span>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="content-slider--nav vertical content-slider--nav_<?= $this->id; ?>">
<ul>
<?php foreach ($this->elements as $i => $nav) : ?>
<li <?php if ($i == 0 && $this->element_type == 'is_slider'): ?>class="active"<?php endif; ?>>
<?php if ($this->element_type == 'is_slider'): ?>
<span data-slide="<?= $i; ?>"><?= $nav->slide_nav_text; ?></span>
<?php elseif ($this->element_type == 'is_buttons'): ?>
<a href="<?= $nav->link_url; ?>"
<?php if ($nav->link_newtab): ?>target="_blank"<?php endif; ?>>
<?= $nav->slide_nav_text; ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<?php endif; ?>
<div class="<?php if ($this->nav_position == 3 || $this->nav_position == 4): ?>col-12 col-md-6<?php endif; ?>">
<?php if ($this->element_type == 'is_slider'): ?>
<div class="position-relative">
<div class="content-slider content-slider_<?= $this->id; ?> swiper custom <?php if ($this->nav_position == 3 || $this->nav_position == 4): ?>is-vertical<?php endif; ?>">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<?php foreach ($this->elements as $slide) : ?>
<?php
if (!isset($slide->size) && $this->element_type == 'is_slider') {
$slide->{"size"} = "";
}
?>
<div class="swiper-slide">
<div class="<?php if ($this->nav_position == 1 || $this->nav_position == 2): ?> row align-items-center gx-lg-4 <?php if ($slide->row_reverse) : ?>flex-row-reverse <?php endif; ?><?php endif; ?>">
<?php if ($slide->image): ?>
<div class="<?php if (($this->nav_position == 3 || $this->nav_position == 4) && ($slide->longtext)): ?>mb-2<?php endif; ?> <?php if (($this->nav_position == 1 || $this->nav_position == 2) && ($slide->longtext)): ?><?= $slide->column_width; ?><?php endif; ?>">
<img class="<?php if ($this->nav_position == 1 || $this->nav_position == 2): ?>swiper-lazy<?php endif; ?> slide-image"
<?php if ($this->nav_position == 1 || $this->nav_position == 2): ?>data-<?php endif; ?>src="<?= Image::get(FilesModel::findByUuid($slide->image)->path, $slide->size[0], $slide->size[1], $slide->size[2]); ?>">
</div>
<?php endif; ?>
<?php if ($slide->longtext || $slide->text) : ?>
<div class="<?php if ($this->nav_position == 1 || $this->nav_position == 2): ?>col-12 col-md<?php else: ?>half-container<?php endif; ?>">
<?php if ($slide->text) : ?>
<div class="slide-caption">
<?php if (!$slide->onlystyle) : ?>
<<?php echo $slide->headline_type; ?>>
<?php echo $slide->text; ?>
</<?php echo $slide->headline_type; ?>>
<?php else : ?>
<span class="<?php echo $slide->headline_type; ?>">
<?php echo $slide->text; ?>
</span>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($slide->longtext) : ?>
<div class="slide-description <?php if (!$slide->image): ?>container<?php elseif ($this->nav_position == 3 || $this->nav_position == 4): ?>half-container<?php endif; ?>"><?php echo $slide->longtext; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach ?>
</div>
</div>
<?php if (count($this->elements) > 1) : ?>
<?php if ($this->show_pagination): ?>
<div class="content-slider_<?= $this->id; ?> swiper-pagination"></div>
<?php endif; ?>
<?php if ($this->show_arrows): ?>
<div class="content-slider_<?= $this->id; ?> swiper-button-prev"></div>
<div class="content-slider_<?= $this->id; ?> swiper-button-next"></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($this->element_type == 'is_buttons' && $this->fixed_image): ?>
<div class="text-center fixed-image w-100 h-100 <?php if (!$this->is_fullwidth && ($this->nav_position == 3 || $this->nav_position == 4)): ?>half-container<?php endif; ?>">
<div class="fixed-image--holder lazy w-100 h-100" data-bg="<?= Image::get(FilesModel::findByUuid($this->fixed_image)->path, $this->size_fixed[0], $this->size_fixed[1], $this->size_fixed[2]); ?>" style="background-position: center center; background-repeat: no-repeat;background-size: cover;">
</div>
</div>
<?php endif; ?>
<?php if ($this->nav_position == 2): ?>
<div class="mt-3 container horizontal content-slider--nav d-none d-md-block content-slider--nav_<?= $this->id; ?>">
<ul>
<?php foreach ($this->elements as $i => $nav) : ?>
<li <?php if ($i == 0 && $this->element_type == 'is_slider'): ?>class="active"<?php endif; ?>>
<?php if ($this->element_type == 'is_slider'): ?>
<span data-slide="<?= $i; ?>">
<?= $nav->slide_nav_text; ?>
</span>
<?php elseif ($this->element_type == 'is_buttons'): ?>
<a href="<?= $nav->link_url; ?>"
<?php if ($nav->link_newtab): ?>target="_blank"<?php endif; ?>>
<?= $nav->slide_nav_text; ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php if ($this->element_type == 'is_slider' && TL_MODE == 'FE'): ?>
<script>
window.addEventListener('load', function () {
if ($('.swiper.content-slider_<?= $this->id;?>').length) {
const swiper_<?php echo $this->id; ?> = new Swiper('.swiper.content-slider_<?php echo $this->id; ?>', {
<?php if ($this->nav_position == 3 || $this->nav_position == 4): ?>
direction: 'horizontal',
preloadImages: true,
//freemode: true,
autoHeight: true,
<?php elseif ($this->nav_position == 1 || $this->nav_position == 2):?>
direction: 'horizontal',
loop: <?php if ($this->loop) : ?>true<?php else:?>false<?php endif;?>,
lazy: {
loadPrevNext: true,
},
<?php endif;?>
<?php if ($this->mousehweel) : ?>
mousewheel: true,
<?php endif;?>
speed: <?php if ($this->transition_time) : ?><?= $this->transition_time; ?><?php else:?>500<?php endif;?>,
<?php if ($this->autoplay) : ?>
autoplay: {
delay: <?php if ($this->autoplay_time) : ?><?= $this->autoplay_time; ?><?php else:?>3000<?php endif;?>,
},
<?php endif; ?>
effect: <?php if ($this->slide_effect) : ?>'<?= $this->slide_effect; ?>'
<?php else:?>'slide'<?php endif;?>,
<?php if ($this->slide_effect == "coverflow") : ?>
coverflowEffect: {
rotate: 50, // Slide rotate in degrees
stretch: 0, // Stretch space between slides (in px)
depth: 100, // Depth offset in px (slides translate in Z axis)
modifier: 1, // Effect multipler
slideShadows: true, // Enables slides shadows
},
<?php endif;?>
<?php if ($this->slide_effect == "fade") : ?>
fadeEffect: {
crossFade: true
},
<?php endif;?>
<?php if (count($this->elements) > 1) : ?>
navigation: {
nextEl: '.content-slider_<?= $this->id;?>.swiper-button-next',
prevEl: '.content-slider_<?= $this->id;?>.swiper-button-prev',
},
pagination: {
el: '.content-slider_<?php echo $this->id; ?>.swiper-pagination',
clickable: true,
},
<?php endif; ?>
});
$('.content-slider--nav_<?= $this->id; ?> span').click(swiper_<?php echo $this->id; ?>, function () {
swiper_<?php echo $this->id; ?>.slideTo($(this).data("slide") <?php if ($this->nav_position == 1 || $this->nav_position == 2): ?>+ 1<?php endif;?>);
$('.content-slider--nav_<?= $this->id; ?> li.active').removeClass("active");
$(this).parent("li").addClass("active");
})
swiper_<?php echo $this->id; ?>.on('slideChange', function () {
$('.content-slider--nav_<?= $this->id; ?> li.active').removeClass("active");
$('.content-slider--nav_<?= $this->id; ?> span[data-slide="' + (swiper_<?php echo $this->id; ?>.realIndex) + '"]').parent("li").addClass("active");
});
}
}, {passive: true})
</script>
<?php endif; ?>