Как поместить стрелки внутрь swiper?

По макету нужно сделать такой блок:

Вроде бы ничего особенного. Я решил использовать swiper т.к. его дефолтные стили похожи на макетные. Я пока просто подключил его и получил следующие:

Как поставить стрелки на картинку?

Моя разметка:

<section class="page-section farytail">
            <div class="_container">
                <h3 class="page-section__title fairytail__title">
                    fairy tail
                    <span>Сказочная страна чудес</span>
                </h3>       
            </div>
            <div class="fairytail__inner">
                <div class="swiper-container">
                <div class="fairytail__slider swiper-wrapper">
                    <div class="swiper-slide"><img src="img/fairytail__slider/01.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/fairytail__slider/02.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/fairytail__slider/03.png" alt=""></div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
                <div class="fairytail__contant">
                    <div class="fairytail__container _container">
                        <div class="fairytail__body">
                            <p class="fairytail__text">Каппадокия - сказочная страна воздушных шаров, сырных домиков, разноцветных долин и волшебных рассветов! 
                                                                Сюда приезжают, чтобы увидеть природные чудеса, полетать на воздушном шаре и конечно же сделать миллион красивых фотографий!
                            </p>
                            <p class="fairytail__text">Участников тура ждёт профессиональная фотосессия от лучших фотографов Каппадокии!
                                                                Ведь именно за волшебными фото на рассвете на фоне воздушных шаров сюда приезжают люди со всего мира! 
                            </p>
                            <div class="fairytail__boby-title">Также Вы увидите:</div>
                            <ul class="faurylail__list">
                                <li>Музей на открытом воздухе в Гёреме</li>
                                <li>Ущелье Ыхлара и монастырь Селиме</li>
                                <li>Подземные города</li>
                                <li>Крепость Учхисар</li>
                                <li>Зельве и Пашабаг</li>
                            </ul>
                            <p class="fairytail__text">и многие другие достпримечательности.</p>
                            <p class="fairytail__text">Местная кухня — один из поводов посетить Каппадокию, здесь есть рестораны на любой бюджет.</p>
                        </div>
                    </div>
                </div>  
            </div>  
    </section>
    

Стили :

.page-section {
    margin: 200px 0;
}
.farytail {}
.page-section__title {
    font-size: 96px;
    line-height: 128px;
    color: #E2AB3F;
    font-family: "Balqis";
    font-weight: 300;
    margin-bottom: 100px; 

    span{
        line-height: 28px;
        font-size: 24px;
        font-family: "Roboto";
        font-style: italic;
        color: #000;
        display: block;
        margin-top: -30px;
        margin-left: 185px;
    }
}

и js:

let mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,
  slidesPerView: 1,
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
})