https://www.regelleistung.net/DesktopModules/Lotes/FrequentModules/Scripts/Utils/Carousel.js?cdv=249

1var lotes = lotes || {};
2lotes.frequentModules = lotes.frequentModules || {};
3lotes.frequentModules.utils = lotes.frequentModules.utils || {};
4
5(function ($, utils) {
6    utils.carousel = {};
7
8    /**
9     * Creates a new Glide instance.
10     * @param {string} selector The selector for the Glide target element.
11     * @param {number} cardsPerView The amount of cards being visible at once.
12     * @param {object} settings Additional settings overriding the default settings.
13     */
14    utils.carousel.create = function (selector, cardsPerView, settings, breakpoints) {
15        const cardCount = $(selector).find(".l-fc-tpl-teaser__carousel-card, .l-fs-tpl-teaser__banderole-card").length;
16        const glideElementWidth = $(selector).find(".l-fs-tpl-teaser__banderole").prevObject[0]?.clientWidth;
17        const cardWidth = $(selector).find(".l-fs-tpl-teaser__banderole-card")[0]?.clientWidth;
18        const cardAmount = (glideElementWidth / cardWidth) >> 0;
19
20        if (!breakpoints) {
21            breakpoints = {
22                1024: {
23                    perView: Math.min(cardCount, cardsPerView, cardAmount, 2)
24                },
25                520: {
26                    perView: 1
27                }
28            };
29        }
30
31        var glide = new Glide(selector, $.extend({
32            type: "slider",
33            perView: Math.min(cardCount, cardsPerView, cardAmount),
34            startAt: 0,
35            rewind: true,
36            bound: true,
37            autoplay: false,
38            gap: 10,
39            breakpoints
40        }, settings));
41
42        glide.on(['resize', 'build.after'], function () {
43            generateBullets($(selector), glide);
44            renderArrowControls($(selector), glide.settings.perView);
45        });
46
47        linkImagePictures($(selector));
48
49        return glide;
50    };
51
52    /**
53     * Creates a new Glide instance.
54     * @param {string} selector The selector for the Glide target element.
55     * @param {number} cardsPerView The amount of cards being visible at once.
56     * @param {object} settings Additional settings overriding the default settings.
57     */
58    utils.carousel.createFurtherLinks = function (selector, cardsPerView, settings) {
59        const cardCount = $(selector).find(".l-fs-tpl-content-further-link-tile").length;
60
61        var glide = new Glide(selector, $.extend({
62            type: "slider",
63            perView: Math.min(cardCount, cardsPerView),
64            startAt: 0,
65            rewind: true,
66            bound: true,
67            autoplay: false,
68            gap: 10,
69            breakpoints: {
70                1279: {
71                    perView: 2
72                },
73                767: {
74                    perView: 1
75                }
76            }
77        }, settings));
78
79        glide.on(['resize', 'build.after'], function () {
80            generateBullets($(selector), glide);
81            renderArrowControls($(selector), glide.settings.perView);
82        });
83
84        return glide;
85    };
86
87    /**
88     * Generates sort buttons for every card.
89     * @param {string} selector The selector for the target element.
90     */
91    utils.carousel.generateSortButtons = function (selector) {
92        var leftButton = $("<i/>").addClass("fa fa-arrow-left").attr("data-bind", "click: moveTeaserCardLeft");
93        var rightButton = $("<i/>").addClass("fa fa-arrow-right").attr("data-bind", "click: moveTeaserCardRight");
94        var sortButtons = $("<div/>").addClass("l-fc-tpl-teaser__carousel-sort-buttons").append([leftButton, rightButton]);
95
96        $(selector).find(".l-fc-tpl-teaser__carousel-sort-buttons").empty();
97
98        const slides = $(selector).find(".glide__slides").children();
99        if (slides.length > 1) {
100            slides.prepend(sortButtons);
101        }
102    }
103
104    function renderArrowControls(container, perView) {
105        const slides = $(container).find(".glide__slides").children().length;
106        const arrowWrapper = $(container).find(".glide__arrows");
107
108        if (slides <= perView) {
109            arrowWrapper.hide();
110        } else {
111            arrowWrapper.show();
112        }
113    }
114
115    function generateBullets(container, glide) {
116      const perView = glide.settings.perView;
117      const slides = $(container).find(".glide__slides").children().length;
118      var bulletCount = slides - (perView - 1);
119      const bulletWrapper = $(container).find(".glide__bullets");
120      bulletWrapper.empty();
121      
122      for (let i = 0; i < bulletCount; i++) {
123        const button = document.createElement("button");
124        button.className = "glide__bullet";
125        button.setAttribute("data-glide-dir", "=" + i);
126        button.setAttribute("type", "button");
127        button.addEventListener('click', function () {
128            glide.go('='+i)
129        });
130
131        bulletWrapper.append(button);
132      }
133    }
134
135    function linkImagePictures(container) {
136        const slides = $(container).find(".glide__slides").children();

137        slides.each(function () {
138            var href = $(this).find('span > a').attr('href');
139            $(this).children('a').attr('href', href);
140        });
141    }
142
143})(window.jQuery, lotes.frequentModules.utils);