https://www.qinetiq.com/-/media/e24c6b110e9344d1b570accbefbfff87.ashx?rev=bd78fd11916749b09b5d3ea5365aeb6c

1var QQ = QQ || {};
2
3
4QQ.fadeOutCarousel = (function ($, undefined) {
5    'use strict';
6
7    var selectors = {
8        carousel: '.carousel',
9        carouselTrack: '.carousel-track',
10        carouselItem: '.carousel-item',
11        dot: '.dot',
12    };
13
14    var init = function () {
15
16        document.querySelectorAll(selectors.carousel).forEach(carousel => {
17            const track = carousel.querySelector(selectors.carouselTrack);
18            const items = carousel.querySelectorAll(selectors.carouselItem);
19            const dots = carousel.querySelectorAll(selectors.dot);
20            let currentIndex = parseInt(carousel.dataset.defaultindex, 10);
21            const totalItems = items.length;
22            const itemWidth = items[0].offsetWidth;
23
24            function updateCarousel(index) {
25                track.style.transform = `translateX(-${index * itemWidth}px)`;
26                dots.forEach((dot, i) => {
27                    dot.classList.toggle('active', i === index);
28                    dot.setAttribute('aria-selected', i === index ? 'true' : 'false');
29                });
30            }
31
32            dots.forEach((dot, index) => {
33                dot.addEventListener('click', () => {
34                    currentIndex = index;
35                    updateCarousel(currentIndex);
36                });
37            });
38
39            let startX = 0;
40            track.addEventListener('touchstart', e => {
41                startX = e.touches[0].clientX;
42            });
43
44            track.addEventListener('touchend', e => {
45                const endX = e.changedTouches[0].clientX;
46                if (startX - endX > 50 && currentIndex < totalItems - 1) {
47                    currentIndex++;
48                } else if (endX - startX > 50 && currentIndex > 0) {
49                    currentIndex--;
50                }
51                updateCarousel(currentIndex);
52            });
53
54            carousel.addEventListener('keydown', e => {
55                if (e.key === 'ArrowRight' && currentIndex < totalItems - 1) {
56                    currentIndex++;
57                    updateCarousel(currentIndex);
58                } else if (e.key === 'ArrowLeft' && currentIndex > 0) {
59                    currentIndex--;
60                    updateCarousel(currentIndex);
61                }
62            });
63
64            carousel.setAttribute('tabindex', '0');
65
66            window.addEventListener('resize', () => {
67                updateCarousel(currentIndex);
68            });
69
70            updateCarousel(currentIndex);
71        });
72
73    };
74
75    return {
76        init: init
77    };
78})(jQuery);
79
80$(document).ready(function () {
81    QQ.fadeOutCarousel.init();
82});
83
84