Browse code
Progress
Benjamin Roth authored on17/11/2022 20:40:21 Showing3 changed files
- files/themes/aldegott_2022/assets/css/inc/common.scss
- files/themes/aldegott_2022/assets/css/theme.scss
- templates/aldegott2022/js_swiper.html5
| ... | ... |
@@ -727,7 +727,16 @@ |
| 727 | 727 |
height:0; |
| 728 | 728 |
@include border-radius(99em); |
| 729 | 729 |
border-color: inherit; |
| 730 |
- content:"" |
|
| 730 |
+ content:""; |
|
| 731 |
+ |
|
| 732 |
+ .is-animated& {
|
|
| 733 |
+ @include transition(width 1.25s 0.25s cubic-bezier(0.45, 0, 0.55, 1)); |
|
| 734 |
+ width: 0; |
|
| 735 |
+ .-show-underline.-in-view&, |
|
| 736 |
+ .swiper-slide-duplicate& {
|
|
| 737 |
+ width: 100%; |
|
| 738 |
+ } |
|
| 739 |
+ } |
|
| 731 | 740 |
} |
| 732 | 741 |
} |
| 733 | 742 |
} |
| 734 | 743 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,101 @@ |
| 1 |
+<?php |
|
| 2 |
+ |
|
| 3 |
+$GLOBALS['TL_CSS'][] = 'bundles/esalesmediacontaoswiper/js/lib/swiper/' . $GLOBALS['TL_ASSETS']['SWIPERJS'] . '/swiper-bundle.min.css'; |
|
| 4 |
+$GLOBALS['TL_CSS'][] = 'bundles/esalesmediacontaoswiper/css/swiper-custom.css'; |
|
| 5 |
+ |
|
| 6 |
+?> |
|
| 7 |
+ |
|
| 8 |
+<script src="bundles/esalesmediacontaoswiper/js/lib/swiper/<?= $GLOBALS['TL_ASSETS']['SWIPERJS'] ?>/swiper-bundle.min.js"></script> |
|
| 9 |
+ |
|
| 10 |
+<script> |
|
| 11 |
+ (function () {
|
|
| 12 |
+ var cte = document.querySelectorAll(".ce_swiperSliderStart,.swiper-holder");
|
|
| 13 |
+ |
|
| 14 |
+ for (var i=0; i<cte.length; i++) |
|
| 15 |
+ {
|
|
| 16 |
+ var e = cte[i].querySelectorAll('.swiper-container')[0];
|
|
| 17 |
+ var w = e.querySelectorAll('.swiper-wrapper')[0];
|
|
| 18 |
+ var c = {
|
|
| 19 |
+ initialSlide: 0, |
|
| 20 |
+ speed: 300, |
|
| 21 |
+ autoHeight: false, |
|
| 22 |
+ effect: 'slide', |
|
| 23 |
+ slidesPerView: 1, |
|
| 24 |
+ slidesPerGroup: 1, |
|
| 25 |
+ preloadImages: true, |
|
| 26 |
+ loop: false, |
|
| 27 |
+ autoplay: false, |
|
| 28 |
+ watchSlidesVisibility: true, |
|
| 29 |
+ on: {
|
|
| 30 |
+ afterInit: function(swiper) {
|
|
| 31 |
+ window.dispatchEvent(new Event('scroll'));
|
|
| 32 |
+ }, |
|
| 33 |
+ slideChangeTransitionEnd: function (swiper) {
|
|
| 34 |
+ window.dispatchEvent(new Event('scroll'));
|
|
| 35 |
+ if (swiper.slides[swiper.activeIndex] !== undefined |
|
| 36 |
+ && (swiper.slides[swiper.activeIndex].classList.contains('-underline-bottom') || swiper.slides[swiper.activeIndex].classList.contains('-underline-top'))
|
|
| 37 |
+ && !swiper.slides[swiper.activeIndex].classList.contains('-show-underline')) {
|
|
| 38 |
+ swiper.slides[swiper.activeIndex].classList.add('-show-underline')
|
|
| 39 |
+ } |
|
| 40 |
+ } |
|
| 41 |
+ } |
|
| 42 |
+ }; |
|
| 43 |
+ |
|
| 44 |
+ if (w.hasAttribute('data-config'))
|
|
| 45 |
+ {
|
|
| 46 |
+ var s = w.getAttribute('data-config').split(',');
|
|
| 47 |
+ |
|
| 48 |
+ c.speed = parseInt(s[1]); |
|
| 49 |
+ c.initialSlide = parseInt(s[2]); |
|
| 50 |
+ |
|
| 51 |
+ if (parseInt(s[0]) > 0) |
|
| 52 |
+ c.autoplay = {delay: parseInt(s[0]), disableOnInteraction: (parseInt(s[7]) == 1 ? true : false)}
|
|
| 53 |
+ |
|
| 54 |
+ if (parseInt(s[3]) != 1) |
|
| 55 |
+ c.preloadImages = false; |
|
| 56 |
+ |
|
| 57 |
+ if (parseInt(s[4]) == 1) |
|
| 58 |
+ c.loop = true; |
|
| 59 |
+ |
|
| 60 |
+ if (parseInt(s[5]) != '') |
|
| 61 |
+ c.navigation = {
|
|
| 62 |
+ nextEl: cte[i].querySelectorAll('.swiper-button-next')[0],
|
|
| 63 |
+ prevEl: cte[i].querySelectorAll('.swiper-button-prev')[0],
|
|
| 64 |
+ }; |
|
| 65 |
+ |
|
| 66 |
+ if (parseInt(s[6]) == 1) |
|
| 67 |
+ c.pagination = {
|
|
| 68 |
+ el: '.swiper-pagination', |
|
| 69 |
+ clickable: true |
|
| 70 |
+ }; |
|
| 71 |
+ |
|
| 72 |
+ if (parseInt(s[8]) == 1) |
|
| 73 |
+ c.effect = 'fade'; |
|
| 74 |
+ |
|
| 75 |
+ if (parseInt(s[9]) > 1) |
|
| 76 |
+ c.slidesPerView = parseInt(s[9]); |
|
| 77 |
+ |
|
| 78 |
+ if (parseInt(s[10]) > 1) |
|
| 79 |
+ c.slidesPerGroup = parseInt(s[10]); |
|
| 80 |
+ |
|
| 81 |
+ if (parseInt(s[11]) == 1) |
|
| 82 |
+ c.autoHeight = true; |
|
| 83 |
+ |
|
| 84 |
+ if (s[12] !== undefined && s[12] !== '') |
|
| 85 |
+ c.slideClass = s[12]; |
|
| 86 |
+ |
|
| 87 |
+ } |
|
| 88 |
+ if (w.hasAttribute('data-breakpoints'))
|
|
| 89 |
+ {
|
|
| 90 |
+ try {
|
|
| 91 |
+ var breakpoints = JSON.parse(w.getAttribute('data-breakpoints'));
|
|
| 92 |
+ c.breakpoints = breakpoints; |
|
| 93 |
+ } catch (e) |
|
| 94 |
+ {
|
|
| 95 |
+ console.log('Swiper.js: breakpoint data attribute is not valid JSON');
|
|
| 96 |
+ } |
|
| 97 |
+ } |
|
| 98 |
+ new Swiper(e,c); |
|
| 99 |
+ } |
|
| 100 |
+ })(); |
|
| 101 |
+</script> |
|
| 0 | 102 |
\ No newline at end of file |