Как создать всплывающее окно слайд-шоу со стрелками «следующий/предыдущий» внутри изображения? ⇐ CSS

[Anonymous]

Я хочу создать всплывающее окно со слайд-шоу, но у меня проблема: я не могу разместить стрелки навигации внутри контейнера изображения, поэтому при изменении размера веб-сайта они остаются на том же месте.
Я хочу переместить сюда стрелки навигации (фиолетовый цвет указывает, где я хочу, чтобы они были)
Вот как я хочу, чтобы это выглядело
Веб-сайт, на котором показано, что у меня есть прямо сейчас
Фрагмент HTML:


×
<

>






Фрагмент CSS:
/* Popup */
.popup {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}

.popup-content {
background-color: #494949;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
border-radius: 20px;
width: 70vw;
max-width: 1600px;
height: auto;
max-height: 1000px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
}

#popupImage {
width: 55%;
height: auto;
border-radius: 20px;
margin-right: 8%;
position: relative;
}

#popupName {
font-size: 3vh;
font-weight: bold;
margin-bottom: 10px;
}

#popupDescription {
font-size: 2vh;
}

/* Navigation Buttons */
.nav-button {
background-color: transparent;
border: none;
color: #fff;
font-size: 2em;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}

#prevImage {
left: 1.5%;
}

#nextImage {
right: 1.5%;
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... -the-image