https://www.nblf.no/js/panel-hero-image-list.js

1let isInitializedPanelHeroImageList = false;
2let timing = 8000;
3
4let intervalCarousel;
5let startCarousel;
6
7let timeoutsetUpPanelHeroImageList;
8
9document.addEventListener('DOMContentLoaded', function () {
10    if (!isInitializedPanelHeroImageList) {
11        timeoutsetUpPanelHeroImageList = setTimeout(function () {
12            setUpPanelHeroImageList(timing);
13        }, 0);
14    }
15});
16
17
18let resizeTimeOut;
19
20window.addEventListener("resize", () => {
21    if (resizeTimeOut) {
22        clearTimeout(resizeTimeOut);
23    }
24
25    if (window.innerWidth >= 768) {
26        resizeTimeOut = setTimeout(() => {
27            setUpPanelHeroImageList(timing);
28        }, 500)
29
30    }
31})
32
33
34function getImageHeight(img) {
35    let aspectRatio = img.naturalHeight / img.naturalWidth;
36    let nextImageHeight = img.clientWidth * aspectRatio;
37
38    return nextImageHeight + "px";
39}
40
41function setUpPanelHeroImageList(timing) {
42    clearTimeout(timeoutsetUpPanelHeroImageList);
43
44    let heroImageList = document.querySelectorAll(".panel-hero-image");
45
46    if (heroImageList) {
47
48        heroImageList.forEach(heroImage => {
49
50            let slides = heroImage.getElementsByClassName('panel-hero-image__slide');
51            let img = slides[0].querySelector('img');
52
53            if (!img.naturalHeight) {
54                return timeoutsetUpPanelHeroImageList = setTimeout(function () { setUpPanelHeroImageList(timing) }, 200)
55            }
56
57            let els = heroImage.getElementsByClassName('panel-hero-image__slide panel-hero-image__slide--active');
58
59
60            while (els[0]) {
61                els[0].classList.remove('panel-hero-image__slide--active');
62            }
63
64            slides[0].classList.add('panel-hero-image__slide--active');
65            
66            slides[0].classList.add('panel-hero-image__slide--fadein');
67            setTimeout(function () { slides[0].classList.remove('panel-hero-image__slide--fadein'); }, 1000)
68
69            heroImage.style.height = getImageHeight(img);
70
71            
72            if (slides.length > 1) {
73                intervalCarousel = setInterval(function () {
74                    for (let i = 0; i < slides.length; i++) {
75
76
77                        if (slides[i].classList.contains('panel-hero-image__slide--active')) {
78                            let nextActive = i + 1;
79                            if (nextActive >= slides.length) {
80                                nextActive = 0;
81                            }
82                            let nextImage = slides[nextActive].querySelector('img');
83                            heroImage.style.height = getImageHeight(nextImage);
84
85                            slides[nextActive].classList.add('panel-hero-image__slide--fadein');
86                            slides[nextActive].classList.add('panel-hero-image__slide--active');
87                            setTimeout(function () { slides[nextActive].classList.remove('panel-hero-image__slide--fadein'); },1000)
88
89                            slides[i].classList.add('panel-hero-image__slide--fadeout');
90                            setTimeout(function () { slides[i].classList.remove('panel-hero-image__slide--fadeout'); slides[i].classList.remove('panel-hero-image__slide--active'); },1000)
91
92                            break;
93                        }
94                    }
95                }, timing);
96            }
97        })
98
99        isInitializedPanelHeroImageList = true;
100    }
101} 
102
103
104function previousHeroImage(e) {
105    let active = e.parentElement.querySelector(".panel-hero-image__slide--active");
106    let slides = e.parentElement.querySelectorAll(".panel-hero-image__slide");
107
108    let heroImage = e.closest(".panel-hero-image");
109    clearInterval(intervalCarousel);
110    clearTimeout(startCarousel);
111
112    if (active) {
113        let currentImageIteration = parseInt(active.dataset.target);
114        let previousImageIteration = currentImageIteration - 1; 
115
116        let previousImage;
117
118        if (currentImageIteration === 0) {
119            previousImage = e.parentElement.querySelector(`[data-target='${slides.length-1}']`);
120        } else {
121            previousImage = e.parentElement.querySelector(`[data-target='${previousImageIteration}']`);
122        }
123
124        let imgTag = previousImage.querySelector('img');
125        heroImage.style.height = getImageHeight(imgTag);
126
127        previousImage.classList.add("panel-hero-image__slide--active");
128        previousImage.classList.add('panel-hero-image__slide--fadein');
129
130        active.classList.add("panel-hero-image__slide--fadeout");
131
132        setTimeout(function () {
133            active.classList.remove("panel-hero-image__slide--fadeout")
134            active.classList.remove("panel-hero-image__slide--active");
135            previousImage.classList.remove('panel-hero-image__slide--fadein');
136        }, 1000)
137
138        startCarousel = setTimeout(function () {
139            setUpPanelHeroImageList(timing)
140        }, 15000);
141    }
142}
143
144function nextHeroImage(e) {
145    let active = e.parentElement.querySelector(".panel-hero-image__slide--active");
146    let slides = e.parentElement.querySelectorAll(".panel-hero-image__slide");
147
148    clearInterval(intervalCarousel);
149    clearTimeout(startCarousel);
150
151    let heroImage = e.closest(".panel-hero-image");
152    if (active) {
153        let currentImageIteration = parseInt(active.dataset.target);
154        let nextImageIteration = currentImageIteration + 1;
155
156        let nextImage;
157
158        if (slides.length === currentImageIteration + 1) {
159            nextImage = e.parentElement.querySelector(`[data-target='${0}']`);
160        } else {
161            nextImage = e.parentElement.querySelector(`[data-target='${nextImageIteration}']`);
162        }
163
164        let imgTag = nextImage.querySelector('img');
165        heroImage.style.height = getImageHeight(imgTag);
166
167        nextImage.classList.add("panel-hero-image__slide--active");
168        nextImage.classList.add('panel-hero-image__slide--fadein');
169        active.classList.add("panel-hero-image__slide--fadeout");
170
171
172        setTimeout(function () {
173            active.classList.remove("panel-hero-image__slide--fadeout")
174            active.classList.remove("panel-hero-image__slide--active");
175            nextImage.classList.remove('panel-hero-image__slide--fadein');
176
177        }, 1000)
178
179        startCarousel = setTimeout(function () {
180            setUpPanelHeroImageList(timing)
181        }, 15000);
182    }
183}