Sashqa

+str.replace(/.+img-(?=\d)|\D+$/g, '')

или

str.match(/(?<=img-)\d+/) | 0

или

parseInt(str.split('/img-').pop())

Набросал регуляное выражение: https://regex101.com/r/S1W4u5/3 думаю, оно вполне решает задачу.

есть массив индексов [0, 3, 1, empty, 2]
<...>
должно быть - [100, 400, 200, empty, 300]

Что, вот прям так - empty? Ну, держите:

for (let i = 0; i < indexes.length; i++) {
  if (indexes.hasOwnProperty(i)) {
    arr.push(arr[indexes[i]]);
  } else {
    arr.length++;
  }
}
arr.splice(0, arr.length - indexes.length);

Если отказаться от этого идиотизма с empty (пусть в массиве индексов будет что-то не числовое, null например; а в исходный массив подставляться будет undefiend, соответственно), то

arr.splice(0, arr.length, ...indexes.map(i => arr[i]));

Не нужно здесь никаких вычисляемых свойств, можно использовать для назначения класса name и password:

:class="{ 'authorization__label--done': name }"

:class="{ 'authorization__label--done': password }"

Представьте что нет никакой ложки докера.

1) Есть одна физическая машина. Вы устанвливаете софт, разные приложухи, базы, web сервера, заходят тестовые юзеры, что-то запускают. Первая проблема - вы не понимаете кому что надо, кто владелец файлов, приложух, зачем висят демоны и кто за это ответственнен. Как выход, вы решаете это разделить на виртуалки.

2) У вас есть физическая машина + на ней виртуалки. Вы выделяете под каждую задачу свою виртуалку, там сидят отдельные пользователи, вы навели какой то порядок. Появляется задача - пользователи хотят php 6, а его нет, хотят python3, а его нет, хотят Mongo, а она старой версии. Вы обновляете репозитарии, качаете новые пакеты, ставите, часть пользователей довольны, часть нет - им нужна старая версия какая была. Упс!

3) Одна физическая машина + еще больше виртуальных машин. Вы разделили всех пользователей так, чтобы никто не дрался за версии софта, если нужен php6 - иди на эту машину, нужен php5 - вот на эту. Все счастливы, но появляются разработчики, которые говорят буквально так - "а у меня на рабочей машине все работает, я перенес все как было на виртуалку, а у меня появляется ошибка missing library libXXX.so.X". И вы понимаете что вам остается только создать полную копию машины разработчика, чтобы софт поехал на этой виртуалке без ошибок... И тут появляется Docker! :)

4) Docker решает именно эту проблему. Вам не нужно заботится о софте который установлен на сервере/виртуалке. Вы просто берете и переносите софт со всеми "кишками" на другой сервер и он просто работает. Работает за счет того, что все "кишки" это слои файловой системы нанизанные как бисер друг на друга. Дополнительно решается проблема свободного места, т.к слои многократно переиспользуются контейнерами, если вам нужен php + одна библиотека, а другому php + другая библиотека, вы используете (грубо говоря) слой php, а для дополнительной библиотеки делаете отдельный слой, одновременно другой человек делает над php другой слой и вы не деретесь между собой и не видите чужих библиотек. Это грубо и скорее всего ради одной библиотеки никто новый слой не делает, делают слой пожирнее.

Все запущенные процессы Docker помещает в изолированную среду процессов, файловой системы и сетевого стека. Есть много особенностей по работе с Docker, т.к он предполагает, что в одном контейнере вы запускаете один процесс. Если вам нужно запустить целый набор демоном, тут появляются проблемы, нужно писать шелл-скрипт, который все это поднимет в контейнере. Так же есть особенности по сети, файловой системе. Для кого то Docker спасение и решение всех проблем, но я как сисадмин от этого всего не в восторге.

Заверните вызов слайдера в $(document).ready():

$(document).ready(function(){
	    	var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        simulateTouch: false,
	        paginationClickable: true,
	        spaceBetween: 30,
	        centeredSlides: true,
	        autoplay: 5000,
	        loop: true,
	        autoplayDisableOnInteraction: false,
});

В дополнение. Хитрые и сложные анимации можно очень хорошо делать на @keyframes. Вот пример: jsfiddle.net/IonDen/nmpkkaqs вначале меняется ширина, потом прозрачность. Можно очень гибко настраивать. Посмотрите например эту статью: https://css-tricks.com/snippets/css/keyframe-anima... или вот такой генератор: cssanimate.com

У Вас примерно так должно работать.

Как бы вам объяснить. Вот сейчас у вас меню срабатывает на прямые действия пользователя (наведение мышки на пункт меню). Это нормально для каких то минимальных анимаций, но не более того.

Для более сложной логики, нужно запоминать действия пользователя в очереди:
1. Навели мышку на пункт, добавили в очередь запись о наведении
2. Убрали мышку, добавили запись об этом.
3. Навели на другой пункт, добавили запись опять.

А дальше, уже совсем другая функция следит за этой очередью и последовательно выполняет действия.
В общем примерно так это делается, я конечно описал очень упрощенно, но подумайте в этом направлении.

Вот так

Можно так

По поводу самих уголков, есть исчерпывающая статья на хабре

linear-gradient() с наклоном (прямо в самом элементе) — IE 9+
border у псевдоэлементов — IE 7+
transform:skew() (также лучше у псевдоэлементов) — IE 9+
transform:skew() (у самого элемента, а внутренний элемент скосить в обратную сторону) — IE 9+
SVG (можно фоном, можно напрямую) — IE 9+

Update: по подсказке lioklio
transform:rotate() (у псевдоэлементов с увеличенной шириной и обрезкой в одном из предков) — IE 9+