Cannot adjust image slider buttons.

[IvayloDaskalov]

Hello guys,
For a website I am trying to create an image slider, where a person can slide between images with arowheads. For that i have the following code:

//

Our Menu

←


→

//

//<script>
const slider = document.getElementById('menu-slider');
const images = slider.querySelectorAll('img');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
let currentIndex = 0;
function updateSlider() {
images.forEach((img, index) => {
img.classList.toggle('hidden', index !== currentIndex);
});
}
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateSlider();
});

nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    updateSlider();
});
updateSlider();

//</script>

However my arrows apear on top of each other in the left lower corner of the images. Not to mention that i struggle to find a way to put a container/wrapper around the the images themselfs, because i think there are a bit too big right now. Can you help me fix the previuos/ next arrowheads and maybe wrap the image slider?

[wongjn]

Hi! Could you look at formatting your code in a code block please?