eSales Media Git repositories
Browse code

Initial commit

Benjamin Roth authored on16/03/2023 20:22:35
Showing1 changed files
templates/contao/mod_eventlist_slider.html5
History View file @c584c6c
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,70 @@
1 
+<?php $this->extend('block_unsearchable'); ?>
2 
+
3 
+<?php $this->block('content'); ?>
4 
+
5 
+<div data-aos="animate__fadeInUp">
6 
+    <div class="swiper event-slider_<?= $this->id; ?>">
7 
+        <div class="swiper-wrapper">
8 
+            <?= $this->events ?>
9 
+        </div>
10 
+    </div>
11 
+
12 
+
13 
+    <?php if ($this->numberOfItems > 1) : ?>
14 
+        <div class="event-slider_<?= $this->id; ?> swiper-button-prev"></div>
15 
+        <div class="event-slider_<?= $this->id; ?> swiper-button-next"></div>
16 
+    <?php endif; ?>
17 
+</div>
18 
+
19 
+<!--
20 
+<?php //echo $this->pagination ?>
21 
+-->
22 
+
23 
+<div class="">
24 
+    <a href="{{link_url::101}}" class="btn btn-outline-primary"><i class="ico ico-kalender"></i> Zum Eventkalender</a>
25 
+</div>
26 
+
27 
+<script>
28 
+    window.addEventListener('load', function () {
29 
+        if ($('.swiper.event-slider_<?= $this->id;?>').length) {
30 
+
31 
+            const swiper_<?php echo $this->id; ?> = new Swiper('.swiper.event-slider_<?php echo $this->id; ?>', {
32 
+                direction: 'horizontal',
33 
+                loop: true,
34 
+
35 
+                preloadImages: false,
36 
+                lazy: {
37 
+                    loadPrevNext: true,
38 
+                },
39 
+
40 
+                spaceBetween: 50,
41 
+                speed: 1500,
42 
+                effect: 'slide',
43 
+
44 
+                <?php if ($this->numberOfItems > 1) : ?>
45 
+                navigation: {
46 
+                    nextEl: '.event-slider_<?= $this->id;?>.swiper-button-next',
47 
+                    prevEl: '.event-slider_<?= $this->id;?>.swiper-button-prev',
48 
+                },
49 
+                <?php endif; ?>
50 
+
51 
+                breakpoints: {
52 
+                    320: {
53 
+                        slidesPerView: 1,
54 
+                    },
55 
+                    480: {
56 
+                        slidesPerView: 2,
57 
+                    },
58 
+                    768: {
59 
+                        slidesPerView: 3,
60 
+                    }
61 
+                },
62 
+
63 
+                centeredSlides: false
64 
+            });
65 
+        }
66 
+    }, {passive: true})
67 
+</script>
68 
+
69 
+
70 
+<?php $this->endblock(); ?>