Как переместить кнопки вперед/назад в другой блок

Делаю слайдер, он с 2 картинками, одна растягивается на всю ширину и блюрится, а вторая имеет ограниченную ширину. Проблема в том что кнопки улетают за экран т.к они находятся в блоке который на весь экран растягивается. Как мне их можно вынести в другой блок что бы так же их разместить по центру

<div class="sl__slide">
    <div style="position: absolute;width: 100%;height: 100%; filter:blur(10px);background-image: url(images/sl1.jpg); z-index: -10">
      
    </div>
    <img src="images/sl1.jpg" alt="Картинка слайда 1" class="sl__img">
    <div class="sl__text">
      <h3 class="sl__zag">Слайд 1</h3>
      <p class="sl__desc">Описание слайда №1</p>
    </div>
  </div>