https://www.elementare-vielfalt.de/_assets/bc981e0c5fb1d84f9cd991b…/modules/stage_slider.js?1766139974

1$(function () {
2    // Stage Slider
3    $('.stageSlider').each(function () {
4        let $stageSlider = $(this);
5
6        let $firstSlide = $(this).find(".stageSlider__page").first();
7        loadStageSliderContent($firstSlide);
8
9        $stageSlider.find('.stageSlider__slider').slick({
10            infinite: true,
11            slidesToShow: 1,
12            slidesToScroll: 1,
13            dots: true,
14            arrows: false,
15            speed: 500,
16            mobileFirst: true,
17            responsive: [
18                {
19                  breakpoint: 768,
20                  settings: {
21                    arrows: true,
22                  }
23                }
24              ]
25        });
26
27        $stageSlider.on('afterChange', function(event, slick, currentSlide) {
28            let $currentSlide = $(slick.$slides[currentSlide]);
29            loadStageSliderContent($currentSlide);
30        });
31
32        initStageSliderMouseover();
33        //setTimeout(initStageSliderMouseover, 1000);
34    });
35    
36});
37
38let initStageSliderMouseover = () => {
39
40    $('.stageSlider').each(function () {
41        $(this).mousemove(function(event) { 
42            var mouseX = event.pageX - $(this).offset().left;
43            var width = $(this).width();
44            if(mouseX < (width / 4)){
45                if(!$(this).hasClass("mouseleft")){
46                    $(this).addClass("mouseleft");
47                }
48            }
49            else{
50                $(this).removeClass("mouseleft");
51            }
52            
53            if(mouseX > ((width / 4)*3)){
54                if(!$(this).hasClass("mouseright")){
55                    $(this).addClass("mouseright");
56                }
57            }
58            else{
59                $(this).removeClass("mouseright");
60            }
61        });
62        $(this).mouseout(function() {
63            $('.stageSlider').removeClass("mouseleft");
64            $('.stageSlider').removeClass("mouseright");
65        });
66    });
67};
68
69let loadStageSliderContent = ($slide) => {
70
71    let winWidth = window.innerWidth;
72    let mobileVersion = false;
73    if (winWidth <= 767 && window.innerHeight > window.innerWidth) {
74        mobileVersion = true;
75    }
76    
77    // Animation?!
78    if($slide.find(".stageSlider__animation").length > 0){
79        
80        let $animationContainer = $slide.find(".stageSlider__animation");
81        if(!$animationContainer.hasClass("initialized")){
82            
83            let jsonPath = $animationContainer.attr("data-json-desktop");
84            if(mobileVersion){
85                jsonPath = $animationContainer.attr("data-json-mobile");
86            }
87
88            if(typeof lottie !== 'undefined') {
89                let stageSliderAnimation = lottie.loadAnimation({
90                    container: $animationContainer[0],
91                    renderer: 'svg',
92                    loop: true,
93                    autoplay: true,
94                    path: jsonPath,
95                    rendererSettings: {
96                        preserveAspectRatio: 'xMidYMid slice'
97                    }
98                });
99                stageSliderAnimation.play();
100            }
101            
102            $animationContainer.addClass("initialized");
103        }
104    }
105    
106    //Video?
107    if($slide.find(".stageSlider__video").length > 0){
108        let $videoContainer = $slide.find(".stageSlider__video");
109        if(!$videoContainer.hasClass("initialized")){
110            let videoPath = $videoContainer.attr("data-video-desktop");
111            if(mobileVersion){
112                videoPath = $videoContainer.attr("data-video-mobile");
113                if(videoPath == undefined) {
114                    videoPath = $videoContainer.attr("data-video-desktop");
115                }
116            }
117            $videoContainer.children("video").attr("src", videoPath);
118            $videoContainer.addClass("initialized");
119        }
120    }
121    
122    //Image?
123    if($slide.find(".stageSlider__image").length > 0){
124        let $imageContainer = $slide.find(".stageSlider__image");
125        if(!$imageContainer.hasClass("initialized")){
126            let imagePath = $imageContainer.attr("data-image-desktop");
127            if(mobileVersion){
128                imagePath = $imageContainer.attr("data-image-mobile");
129            }
130            $imageContainer.children("img").attr("src", imagePath);
131            $imageContainer.addClass("initialized");
132        }
133    }
134}