https://an0ncer.github.io/javascript/pages/list/mod_carousel.js

1let CAROUSEL = undefined;
2
3export class Carousel {
4    #callbacks = {
5        "select": [],
6        "click": [],
7    };
8
9    /**
10     * Инициализация карусели.
11     * @returns {Carousel}
12     */
13    static Init() {
14        if (CAROUSEL === undefined) {
15            CAROUSEL = new Carousel();
16        }
17        return CAROUSEL;
18    }
19
20    constructor() {
21        this.id = '1';
22        this.enabled = true;
23
24        this.$carouselSelect = $('.carousel > .block-select');
25        this.$item = $('.carousel  > .item-wrapper.select');
26        this.$carouselSelect.css({ 'left': $('.carousel').scrollLeft() + this.$item.position().left, 'width': this.$item.width() });
27
28        this.$Selector = {
29            hide: () => {
30                this.$carouselSelect.css({ 'opacity': 0 });
31                this.$item.find('.item').css({ 'font-weight': 'normal', color: '#A4A4A4' });
32            },
33            show: () => {
34                this.$carouselSelect.css({ 'opacity': '' });
35                this.$item.find('.item').css({ 'font-weight': '', color: '' });
36            }
37        }
38
39        $('.carousel > .item-wrapper').on('click', (e) => {
40            this.Select($(e.currentTarget));
41        });
42    }
43
44    Select($element) {
45        if (!this.enabled) return;
46        if ($element.attr("data-id") === this.id) { 
47            this.#Dispatch("click", this);
48            return;
49        }
50        this.$item.removeClass('select');
51        this.$item = $element;
52        this.$item.addClass('select');
53        this.$carouselSelect.css({ 'left': $('.carousel').scrollLeft() + this.$item.position().left, 'width': this.$item.width() });
54        this.id = this.$item.attr("data-id");
55        this.#Dispatch("select", this);
56    }
57
58    /**
59     * Добавляет обработчик события.
60     * @param { "select", "click" } event - Название события.
61     * @param {Function} callback - Функция обработчик события.
62     */
63    on(event, callback) {
64        if (typeof callback !== "function") return;
65        if (this.#callbacks[event] === undefined) {
66            this.#callbacks[event] = [];
67        }
68        this.#callbacks[event].push(callback);
69    }
70
71    #Dispatch(event, data) {
72        if (this.#callbacks[event] === undefined) return;
73        this.#callbacks[event].forEach(callback => callback(data));
74    }
75}