Сергей delphinpro

https://gist.github.com/delphinpro/50f2c7b4589502b...

Берем портянку if-else

if (date.getDay() == 1) {
	period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`; 
} else if (date.getDay() == 2) {
	period[i] = `${date.setHours(-24).toLocaleDateString()} - {date.setHours(144).toLocaleDateString()}`;
} else if (date.getDay() == 3) {
	period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
} else if (date.getDay() == 4) {
	period[i] = `${date.setHours(-48).toLocaleDateString()} - {date.setHours(120).toLocaleDateString()}`;
} else if (date.getDay() == 5) {
	period[i] = `${date.setHours(-72).toLocaleDateString()} - {date.setHours(96).toLocaleDateString()}`;
} else if (date.getDay() == 6) {
	period[i] = `${date.setHours(-96).toLocaleDateString()} - {date.setHours(72).toLocaleDateString()}`;
} else (date.getDay() == 0) {
	period[i] = `${date.setHours(-120).toLocaleDateString()} - {date.setHours(48).toLocaleDateString()}`; 
}

и переписываем

let arr = [[-120,48], [null,168], [-24,144], [-48,120], [-48,120], [-72,96], [-96,72]];
let day = date.getDay();
let dateString1 = arr[day][0] === null ? date.toLocaleDateString() : date.setHours(arr[day][0]).toLocaleDateString();
let dateString2 = arr[day][1] === null ? date.toLocaleDateString() : date.setHours(arr[day][1]).toLocaleDateString();
period[i] = `${dateString1} - ${dateString2}`;

Плюс, если уж вы используете es6 синтаксис (классы у вас там, шаблонные строки), то объявляйте переменные через const/let, а не var

Насколько я помню этот плагин, правила валидации описываются через атрибут name (или data-атрибуты самого поля)
У вас скрипт конфигурации не соответствует имеющимся полям

Не получится, скорее всего.
Используйте кастомные решения. Отличный ползунок — ionden.com/a/plugins/ion.rangeSlider/index.html

Генерим кучу элементов (на каждый штрих).
Отслеживаем мышь над компонентом.
По X-координате рассчитываем функцию синуса для двух периодов.
По Y-координате вносим небольшой коээффициент, чтобы высота волны реагировала на положение мыши по вертикали (опционально)
По этим значениям раскидываем близлежащим элементам стили трансформаций (translateY(computedValue))

Потому что в такой записи функция является выражением. Именованным выражением, если быть точнее. А имя именованного функционального выражения является локальным для этого выражения, и доступно только внутри.
Значение этого выражения никуда не присваивается, а используется только вычисления условия. Функция у нас приводится к истине, условие выполняется. А внутри идет обращение к несуществующему в этом скоупе идентификатору f, вылетает undefined или Error в стрикт-режиме.

Уже много раз писал, но для вас повторюсь:

Запомните золотое правило разработчика:
В любой непонятной ситуации смотри документацию.
Если документация ситуацию не прояснила — смотри исходники и объекты в консольке.

В данном случае документация https://owlcarousel2.github.io/OwlCarousel2/docs/a... говорит нам, что в карусельке по сути нет открытых методов для получения данных. Есть кучка событий, из которых мы можем что-то узнать, или, сгенерировав их самостоятельно, повлиять на поведение.
А дальше все зависит от вашего конкретного кейса. Возможно вам будет достаточно прослушивать событие changed.owl.carousel, чтобы знать на какой слайд перекрутилась карусель.

Фишка в том, что вам не нужен WOW =)
Всё что делает этот скрипт — навешивает классы на элементы, когда они попадают в поле зрения при скроллинге (вообще не так всё просто, кое-что еще умеет, но по сути так).
У вас есть animate.css — библиотека классов анимашек
У вас есть fullpage.js, у которого есть событие afterSlideLoad
Вот это событие как раз и возникает, когда новый слайд отобразится.

Имея всё это, мы раскидываем по нужным элементам какой-то инит-класс, скрывающий элемент до поры (не display:none!), а после наступления события довешиваем еще классов для срабатывания анимации (смотрите документацию и исходники animate.css)

Можем еще по событию onSlideLeave вернуть всё обратно, чтобы при следующем переходе анимашки снова отработали.

Точно так, как вы сами описали, только на языке кода. Волшебной функции FindWhatINeed() не существует.

$('.parent') // берем родительские блоки
  .on('mouseenter', '[data-id]', event=>{ // вешаем обработчики на дочерние
    let id = $(event.target).data('id'); // узнаем id
    $(event.target).closest('.parent') // поднимаемся до своего родителя
      .siblings('.parent') // переходим к соседу
      .find('[data-id='+id+']') // берем в нем нужный дочерний
     //... что-то с ним делаем
;
  })

Такой код будет работать в обе стороны.
Если нужно только в одну, то делаем выборку только одного родителя

$('.parent').eq(0) // берем родительские блоки - только первый

Не совсем ясно, что значит упростить. Вроде и так довольно все просто.
Ну можно вот так записать:

var viewBox = [
    -offset,
    -offset,
    width + offset*2,
    height + offset*2
].join(' ');

Потому что radio у вас — это NodeList
Его нужно обежать циклом и на каждую ноду повесить обработчик.

Почаще и повнимательнее читайте документацию: querySelectorAll()

Этих файлов не должно у вас быть в папке source вообще.
Вы должны установить данные пакеты в npm и отдельно обработать всех вендоров. Либо склеить их в общий файл, либо подключать по отдельности, либо еще как-то.

Если же вам хочется именно так, то проще будет положить их в отдельную папку и не заморачиваться с исключением.