Николай

Достаточно поменять
mousewheel: true

на

mousewheel: {
          forceToAxis: true,
        },

Привет, суть в том, что тебе надо использовать barGap
Только у тебя в примере, у тебя значение бара - это массив, и он не будет работать, тебе надо каждый serias сделать в виде бара, тогда ты сможешь его использовать

Пример

1- Вам нужно пределить контейнер, который вы будете инициализировать, не важно, это вся страница или что-то внутри страницы со скроллом.
2- Задать свдиг на сколько пикселей вам надо крутить контейнер.
3- В идеале, еще через обсервер смотреть, находитесь ли вы в видимой области экрана, если да, то , автоматически ставить слушатели, если нет, то убирать их, чтобы они просто так не работали, если вы вне зоны области
Важный момент, вы хотите сделать чтобы стрелки были статичны или названия классов тоже передавать туда ?

Примерный код будет такой

const scroll = new HorizontalScroll('#scrollContainer1', {
    scrollStep: 400, // шаг в пикселях
    scrollBehavior: 'smooth' // плавная прокрутка
});

class HorizontalScroll {
            constructor(container, options = {}) {
                this.container = typeof container === 'string' 
                    ? document.querySelector(container) 
                    : container;
                
                this.options = {
                    scrollStep: 300,
                    scrollBehavior: 'smooth',
                    ...options
                };
                
                this.content = this.container.querySelector('.scroll-content'); // если нужно, чтобы вы передавали классы, можно сделать в виде опшинов и объект со значением. 
                this.leftArrow = this.container.querySelector('.scroll-arrow.left');
                this.rightArrow = this.container.querySelector('.scroll-arrow.right');
                
                this.isInViewport = false;  //переменная, которая как раз смотрит и говорит, есть ли скроллы в зоне видимости или нет
                this.observer = null;   // обсервер, если вам нужен
                
                this.init();
            }
            
            init() {
                // Инициализация Intersection Observer
                this.initObserver(); // метод, логику думаю можно описать
                 
                // Обновление состояния стрелок
                this.updateArrows();
                
                // Обработка изменения размера окна
                window.addEventListener('resize', () => this.updateArrows());
                
                // Обработка скролла контента
                this.content.addEventListener('scroll', () => this.updateArrows());


            } 
      }
}

Проблема в том, что все fetch запросы запускаются параллельно, и filePosition вычисляется до того, как предыдущие файлы успевают добавиться в массив. Вот несколько способов решения:

// В дочернем компоненте - передаем все файлы сразу
attachThumbnail: function (e, curObj) {
  e.target.closest('.area-upload').classList.remove('drag-file');
  e.target.closest('.area-upload').style.display = 'flex';

  let files = e.target.files || e.dataTransfer.files;
  let allowFiles = this.validateFiles(e, files, curObj);

  this.$emit('attachThumbnail', curObj, Array.from(allowFiles));
},

// В родительском компоненте - обрабатываем последовательно
async attachThumbnail(curObj, files) {
  let index = this.formData.materialFiles.findIndex(item => item.lang === curObj.lang);
  
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    let filePosition = this.formData.materialFiles[index].files.restFiles.length;

    console.log('Array length ' + filePosition);

    try {
      const response = await this.uploadFile(curObj, file, 'rest', filePosition);
      const data = await response.json();
      
      console.log('append file');
      this.formData.materialFiles[index].files.restFiles.push({
        name: data.fileName,
        id: data.id
      });
    } catch (error) {
      console.log(error);
    }
  }
}

Примерно как-то так

Хмм, а что мешает тебе подставить в эту иконку какой-то слой, типа

А дальше, слушателем на позицию мышки делать подсветку при наведении, радиус ты можешь вычислить сам.
Пришли всю иконку или сделай ссылку, так непонятно, что ты хочешь. Соседние точки , ты можешь вычислить по
https://developer.mozilla.org/en-US/docs/Web/API/S...

Пример определения
function getMousePosition(evt) {
      const CTM = svg.getScreenCTM();
      return {
        x: (evt.clientX - CTM.e) / CTM.a,
        y: (evt.clientY - CTM.f) / CTM.d
      };
    }

Если прям решение в лоб, то сделайте переменную, которая у вас будет хранить список ваших картинок, у вас он есть, вы же по нему делаете цикл, далее в цикле записывайте ширину, после цикла, у вас будет массив с шириной всех картинок, ну и проверить можно будет, что если у вас есть 0 в массиве, то делаете одно условие, если 0 нет, то другое

а как вы вызываете этот класс ?
export className = new ClassWebRtc ()?
или вы прям создаете 2 новых класса ?

https://learn.javascript.ru/fetch

чем вы собираете ?
Отключите кеширование на wordpress

async generateTokens(payload) {
        const accessToken = await jwt.sign(payload, config.SECRET_KEY_ACCESS_TOKEN, {expiresIn: '15m'})
        const refreshToken = await jwt.sign(payload, config.SECRET_KEY_REFRESH_TOKEN, {expiresIn: '30d'})
        return {
            accessToken,
            refreshToken
        }
    }

Судя по документации, у вас там должна быть асинхронная функция,

Второй момент, вы должны зарезолвить пропис,
У вас скорее всего его вообще нет, а вы пытаетесь его передать

У вас получение данных есть, но вы не кладете их в хранилище,

localStorage.setItem('optionSelected', JSON.stringify(значение селекта));

А взять , через getItem

ну, судя по коду, либо он не полный, либо что-то не то
вот тут есть пример, очень похож на ваш Ссылка
Вам, надо либо в ссылке где иконка вызывать функцию клика, либо, повесить слушателя, js не понимает что это такое и поэтому вам и говорит, что menu не определено

Держите, мощная библиотека

Документация
Судя по документации, поведение click неизвестно

$('[type="button"]').click(function()
попробуй заменить на
$('[type="button"]').on('click',function()

а
formButton.onclick = function(event) {
заменить на
formButton.addEventListener("click", send);

function send(event) {
  event.preventDefault();
  const phone = document.getElementById('phone');
  const email = document.getElementById('email');
  let classPhone = phone.classList;
  let classEmail = email.classList;
    if (phone.value === "" && email.value === "") {
      classPhone.add ("alert");
      classEmail.add ("alert");
  			} 
  		
    if (phone.value != "" || email.value != "") {
      classPhone.remove ("alert");
      classEmail.remove ("alert");
    	}
}