Я конечно не разбираюсь в свайпере, но там же вроде можно в настройках слайдера указывать свои элементы, которые будут отвечать за навигацию/пагинацию. В данном случае видно, что пагинация и навигация находятся на одном уровне, следовательно их можно поместить в общий блок и выводить его после swiper-wrapper.
Например,

<div class="slider">
   <<div class="swiper-container">
      <div class="swiper-wrapper">
         <!-- твой контент -->
      </div>
      <div class="slider__controls">
         <div class="slider__nav">
            <div class="slider-button-prev">Предыдущий проект</div>
            <div class="slider-button-next">Следующий проект</div>
         </div>
         <div class="slider__pagination"></div>
      </div>
   </div>
</div>

И в настройках слайдера

pagination: {
   el:  ".slider__pagination",
},

navigation: {
   nextEl:  ".slider-button-next",
   prevEl:  ".slider-button-prev",
 },

Отсортировать пустой массив?)
Для сортировки массива можно воспользоваться встроенным методом Array.prototype.sort()

const array = [5, 2, 8, 11, 42];
const sortedArray = array.sort((a, b) => a - b);
console.log(sortedArray); // [2, 5, 8, 11 , 42]