Spaceoddity

https://learn.javascript.ru/uibasic#prompt

Вкратце, основная проблема со всеми этими слайдерами в том, что им для корректного расчёта размеров/количества слайдов надо заранее (до инициализации слайдера, т.е. до построения слайдером собственной разметки) "знать" размеры, разметку и количество контента.
Грубо говоря, если у контента стоит display:none, то слайдер посчитает что это контент нулевой ширины и соответствующим образом сгенерит слайды с содержимым нулевой ширины.
Путей обхода этого много и зависит от конкретного слайдера. Где-то надо реинициализацию сделать, где-то пересчитать размеры (проблема, кстати, актуальна и для адаптива), где-то не надо использовать display:none или динамическую генерацию контента после инициализации слайдера.

https://nanto.bitbucket.io/ - моя реализация на чистом css
если надо - могу скинуть код всех анимаций, но с ними довольно муторно разбираться. ну или подсказать направление в котором вам стоит покопаться - ключевое слово steps в css-свойстве "animation-timing-function"

1. Я не понял разницы. "Пришлось заходить в браузер и вводить данные" - а в приложение не надо заходить и данные вводить? Если что современные браузеры могут хранить и куки, и пароли, и много чего ещё.
2. Тут не native нужен, а cordova.

Вы ставите обработчики клика на кнопки (функция highlightTab). В этой функции вы навешиваете класс. Ну вот и добавьте сюда любые изменения вашей переменной. Можете в кнопках через data-атрибуты его прописать и считывать при клике. Можете соответствие классов переменным сделать. Вариантов много. Самое главное - вам нужно событие по которому вы будет менять переменную. Это событие у вас - клик. Так что в обработчике клика и производите любые нужные вам манипуляции.

Как-то так:

<button type="button" class="btn focus-btn active" data-timer-val="5">Focus</button>
<button type="button" class="btn short-break-btn" data-timer-val="25">Short Break</button>
<button type="button" class="btn long-break-btn" data-timer-val="45">Long Break</button>

let startingMinutes = document.querySelector(".btn.active").dataset.timerVal;
//...
function highlightTab(event) {
    for (i = 0; i < buttons.length; i++) {
        buttons[i].className = buttons[i].className.replace(' active', '');
    }

    event.currentTarget.className += ' active';
    startingMinutes = event.currentTarget.dataset.timerVal;
}

Всё работает.
Ваша валидация проверяет только поле на непустое значение при изменении значения.

function truncateString(str, num) { // функция принимает два аргумента - саму строку и ограничение длины строки

  if (str.length > num) { // если длина строки больше ограничения
    return str.slice(0, num) + "..."; // обрезаем строку до ограничения, в конце добавляем многоточие (sic!) и возвращаем 
  } else { // в противном случае
    return str; // возвращаем исходную строку
  }
}

Вторая функция делает всё то же самое, только записана в одну строчку - https://developer.mozilla.org/ru/docs/Web/JavaScri...

https://framework7.io
И что мешает вкорячить Вью не ядром проекта, а хотя бы для этих самых "свистоперделок"?

https://developer.mozilla.org/en-US/docs/Web/API/M...

Слайдер должен состоять из блоков. В каждом блоке три картинки, по центру абсолютно спозиционированная надпись.
https://codepen.io/nantohome/pen/abdjdxP

А в чём проблема-то? Слева слайдер, справа отдельно выведены элементы слайдера в виде сетки.

Знаете, вам для этого не нужен JS и уж тем более jQ - это всё вёрсткой делается.
Но вы уже заюзали бутстрап, так что... удачи! )))

function changeValue()

$('.moreless').click(function() {
	if($(this).val() == "more ▼") {
		$(this).val() == "less ▲"
	} else {
		$(this).val() == "more ▼"
	};
});