Danny Arty

Их нужно инициализировать в цикле, а вы по сути только один:

var sliders = document.querySelectorAll('.swiper'),
    prevArrow = document.querySelectorAll('.swiper-btn-prev'),
    nextArrow = document.querySelectorAll('.swiper-btn-next');
sliders.forEach((slider, idx) => {
    let swiper = new Swiper(slider, {
        slidesPerView: 6,
        spaceBetween: 10,
        navigation: {
          nextEl: nextArrow[idx],
          prevEl: prevArrow[idx],
        },
        breakpoints: {
          320: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          480: {
            slidesPerView: 3,
            spaceBetween: 10
          },
          970: {
            slidesPerView: 6,
            spaceBetween: 10
          }
        }
      })
})

Modx Revo - бесплатная опенсорсовая CMF.
Есть магазин дополнений от разработчиков из СНГ - modstore, там можно купить дополнения с РФ. В принципе и у зарубежного modmore тоже можно.
В большинстве случаев, если у вас не интернет-магазин, задачи можно решить и бесплатными дополнениями.

А почему бы не сделать это сразу на бэке, вместо того, чтобы тратить ресурсы пользователя?
Ну если вдруг такой "возможности" нет, то можно сделать и на CSS:

ul {
   display: flex;
   flex-direction: column;
}
.lang-item-10 {
   order: 1;
}
.lang-item-2 {
   order: 2;
}

Оберните слайдер в еще один контейнер и укажите кнопки там, условно такая разметка

<div class="slider-wrapper">
   <div class="swiper">
      <div class="swiper-wrapper">
         <div class="swiper-slide">Slide 1</div>
         <div class="swiper-slide">Slide 2</div>
         <div class="swiper-slide">Slide 3</div>
       </div> 
    </div>
    <!-- Кнопки -->
    <div class="myslider-prev swiper-button-prev"></div>
    <div class="myslider-next swiper-button-next"></div>
</div>

И в js укажите так

var swiper = new Swiper('.swiper', {
  ...тут ваши прочие параметры
  navigation: {
    nextEl: '.myslider-next',
    prevEl: '.myslider-prev',
  },
});

Если читали доку Swiper, то должны были увидеть параметр disableOnInteraction, который по умолчанию равен true.
Он отвечает за то, что будет ли остановлено автовоспроизведение после взаимодействия пользователя со слайдером.

Раз можно вводить только цифры, то используйте input[type="number"], а не input[type="text"].

Потому что в js у вас data - это якобы массив, хотя с обработчика вы возвращаете всегда строку.
Как вариант в обработчике измените код на следующий везде, где возвращаете результат:

$result = array();
if (!$stmt->rowCount()) {
    $result['error_login'] = "Пользователь с такими данными не зарегистрирован";
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
}
...
$_SESSION['user_id'] = $user['id'];
$result['us3r_id'] = $_SESSION['user_id'];
echo json_encode($result, JSON_UNESCAPED_UNICODE);

И добавьте в AJAX-запрос параметр dataType: "json"

p.s отслеживайте, что передается и что возвращается в DevTools во вкладке Network, а не Console

Ну дык flex-контейнер у вас div.server-header, а его дочерние элементы - это div без класса и div.server-item.
Так вот Nomad List и стрелка находятся внутри div-а без класса. Каким образом к ним должен применяться flex, если у их родителя нет таких стилей?
Научитесь пользоваться DevTools - смотрите исходный код и стили и все встанет на свои места.

Имхо это можно реализовать на чем угодно, просто выберите, что больше по душе, ибо сомневаюсь, что нужен какой-то ультра-функционал. А самый минимум, требуемый для сайта-фотоальбома, потянет любая нормальная CMS.
Если говорить именно о нишевых, то я как-то давно работал с фотографом из Германии, у которого был сделан сайт на Coppermine Gallery - это опенсорсовая CMS как раз для фотогалерей. Посмотрел сейчас, проект на гите живой, даже новую версию выпустили недавно.
В принципе, наверное, и на любых конструкторах можно тоже самое сделать, причем есть как раз один такого направления - Zenfolio.