Как правильно стилизовать кастомную пагинацию и навигацию в Swiper?

Question

[WillieShibelgut]

Привет всем! Есть такой макет, в котором навигация и пагинация находятся не в стандартных местах:


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

P.S.
Была идея переместить пагинацию в блок с текстом, и прижать всё к левому краю, но это вроде бы нарушает HTML структуру Swiper-а. Также пробовал аппендить блок пагинации в блок с текстом через JS, что показалось ещё большими костылями :)

Answer 1

[Yurii Korniienko]

Я конечно не разбираюсь в свайпере, но там же вроде можно в настройках слайдера указывать свои элементы, которые будут отвечать за навигацию/пагинацию. В данном случае видно, что пагинация и навигация находятся на одном уровне, следовательно их можно поместить в общий блок и выводить его после 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",
 },