<?php
if (TL_MODE == 'FE') {
if (!isset($this->size)) {
$this->{"size"} = "";
}
}
?>
<div <?php echo $this->cssID; ?> class="content--element <?php echo $this->class; ?>">
<div class="ce--inner container">
<?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; ?>">
<?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>
<?php endif; ?>
<?php
if ($this->selecttype == "multiple") {
$dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true));
}
?>
<div class="ce--content-slider <?php if (count($this->galery) > $this->slides_per_view || count($dataSorted) > $this->slides_per_view) : ?>is-slider<?php endif; ?>"
data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
<?php $rand = rand(1, 100); ?>
<?php if ($this->open_lightbox): ?>
<script>
$(function () {
$(".group_<?php echo $rand; ?>").colorbox({
rel: "group_<?php echo $rand; ?>",
current: "Bild {current} von {total}",
maxWidth: '95%',
maxHeight: '95%'
});
});
</script>
<?php endif; ?>
<div class="swiper content-slider_<?= $this->id; ?>">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<?php if ($dataSorted) : ?>
<?php foreach ($dataSorted as $data) : ?><?php if ($image = $this->getImageObject($data, $this->size)) : ?>
<div class="swiper-slide">
<?php if ($this->open_lightbox): ?>
<a href="<?= Image::get(FilesModel::findByUuid($image->uuid)->path, null, null, null); ?>"
class="group_<?php echo $rand; ?> bts-cboxElement cboxElement"><?php endif; ?>
<img class="swiper-lazy"
data-src="<?= Image::get(FilesModel::findByUuid($image->uuid)->path, $this->size[0], $this->size[1], $this->size[2]); ?>">
<?php if ($this->open_lightbox): ?></a><?php endif; ?>
</div>
<?php endif; ?>
<?php endforeach ?>
<?php else : ?>
<?php foreach ($this->galery as $slide) : ?>
<div class="swiper-slide">
<?php if ($this->open_lightbox): ?>
<a href="<?= Image::get(FilesModel::findByUuid($slide->slide)->path, null, null, null); ?>"
class="group_<?php echo $rand; ?> bts-cboxElement cboxElement"><?php endif; ?>
<img class="swiper-lazy"
data-src="<?= Image::get(FilesModel::findByUuid($slide->slide)->path, $this->size[0], $this->size[1], $this->size[2]); ?>">
<?php if ($this->open_lightbox): ?> </a><?php endif; ?>
<?php if ($slide->slide_text) : ?>
<span class="slider-subline"><?php echo $slide->slide_text; ?></span>
<?php endif; ?>
</div>
<?php endforeach ?>
<?php endif; ?>
</div>
</div>
<?php if (count($this->galery) > 1 || count($dataSorted) > 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>
</div></div>
<?php if (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; ?>', {
direction: 'horizontal',
loop: <?php if ($this->loop) : ?>true<?php else:?>false<?php endif;?>,
preloadImages: false,
lazy: {
loadPrevNext: true,
},
spaceBetween: <?php if ($this->space_between) : ?><?= $this->space_between; ?><?php else:?>30<?php endif;?>,
//centeredSlides: <?php if ($this->centered_slides) : ?>true<?php else:?>false<?php endif;?>,
//slidesPerView: <?php if ($this->slides_per_view) : ?><?= $this->slides_per_view; ?><?php else:?>1<?php endif;?>,
speed: <?php if ($this->transition_time) : ?><?= $this->transition_time; ?><?php else:?>1500<?php endif;?>,
effect: <?php if ($this->slide_effect) : ?>'<?= $this->slide_effect; ?>'<?php else:?>
'slide'<?php endif;?>,
<?php if ($this->autoplay) : ?>
autoplay: {
delay: <?php if ($this->autoplay_time) : ?><?= $this->autoplay_time; ?><?php else:?>3000<?php endif;?>,
},
<?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->galery) > 1 || count($dataSorted) > 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; ?>
slidesPerView: 1,
breakpoints: {
768: {
slidesPerView: <?php if ($this->slides_per_view) : ?><?= $this->slides_per_view / 2; ?><?php else:?>1<?php endif;?>,
},
992: {
slidesPerView: <?php if ($this->slides_per_view) : ?><?= $this->slides_per_view; ?><?php else:?>3<?php endif;?>,
}
}
});
}
}, {passive: true})
</script>
<?php endif; ?>