<button class="prevButton"></button>

<div class="menu-img">
  <ul class="menu-img__list">
    <li class="menu-img__item"><img data-food='buger' src="https://images.unsplash.com/photo-1571091655789-405eb7a3a3a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJ1cmdlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"></li>
    <li class="menu-img__item"><img data-food='pizza' src="https://www.simigeriapetru.ro/uploads/products/Pizza-Regina-Simigeria-PETRU.png"</li>
    <li class="menu-img__item"><img data-food='chicken' src="https://www.seriouseats.com/thmb/hGmf-CklPEWYtGrsB1XIOfldngM=/1500x844/smart/filters:no_upscale()/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__2015__07__20210324-SouthernFriedChicken-Andrew-Janjigian-21-cea1fe39234844638018b15259cabdc2.jpg"</li>
    <li class="menu-img__item"><img data-food='icecream' src="https://assets.tmecosys.com/image/upload/t_web767x639/img/recipe/ras/Assets/D032E1F7-FFC9-4483-9CC2-025DF7C1185E/Derivates/383D27F0-A27D-4632-8B32-DE1B658DBB64.jpg"</li>
    <li class="menu-img__item"><img data-food='coffee' src="https://videohive.img.customer.envatousercontent.com/files/85e0d3d8-4e42-404b-849b-3580e12ede73/inline_image_preview.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=1414bf258c69a95ea64048e9044d4dfa"</li>
  </ul>
</div>

<button class="nextButton"></button>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  font-size: 30px;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  border: none;
  background-color: blue;
  color: white;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, .3);
  transition: all 150ms ease;
  margin: 10px;
}
button:hover {
  background-color: orange;
  color: black
}


.menu-img__list {
  list-style: none;
  padding: 0;
  margin: 20px;
}
.menu-img__item {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  display: none;
}
.menu-img__item img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.menu-img__item.current-img {
  display: block;
}
// arr = ['burgers','pizza', 'chicken', 'icecreem', 'coffee'];
// images = Array.from(document.querySelectorAll('.menu-img__item'));

// const nextButton = document.querySelector('.nextButton')
// const prevButton = document.querySelector('.prevButton')

// nextButton.textContent = images[1];
// prevButton.textContent = arr[arr.length - 1];
// images[0].style.display='block';

// nextButton.addEventListener('click', () => {
//   shiftTextButtonUp();
//   showNextImg();
// })

// prevButton.addEventListener('click', () => {
//   shiftTextButtonDown();
//   showPrevImg();
// })


// function shiftTextButtonUp() {
//   arr.push(arr.shift());
//   nextButton.textContent = arr[1];
//   prevButton.textContent = arr[arr.length - 1];
// }

// function shiftTextButtonDown() {
//   arr.unshift(arr.pop());
//   nextButton.textContent = arr[1];
//   prevButton.textContent = arr[arr.length - 1];
// }


// function showNextImg() {
//   images[0].style.display='none';
//   images.push(images.shift());
//   images[0].style.display='block';  
// }

// function showPrevImg() {
//   images[0].style.display='none';
//   images.unshift(images.pop())
//   images[0].style.display='block';  
// }

// function change(){
// 	currentImg.parentElement.style.display='none';	
// 	currentImg=images[1];
// 	currentImg.parentElement.style.display='block';
// 	prevButton.textContent=images[0].dataset.food;
// 	nextButton.textContent=images[2].dataset.food;
// }






var images = Array.from(document.querySelectorAll('.menu-img__item img'));
const nextButton = document.querySelector('.nextButton')
const prevButton = document.querySelector('.prevButton')

var currentImg=images[0];
images.unshift(images.pop())

changeText();


nextButton.addEventListener('click', () => {
  showNextImg();
})

prevButton.addEventListener('click', () => {
  showPrevImg();
})


//function shiftTextButtonUp() {
//  arr.push(arr.shift());
//  nextButton.textContent = arr[1];
//  prevButton.textContent = arr[arr.length - 1];
//}

//function shiftTextButtonDown() {
//  arr.unshift(arr.pop());
//  nextButton.textContent = arr[1];
//  prevButton.textContent = arr[arr.length - 1];
//}


function showNextImg() {
  images.push(images.shift());
  changeText() 
}

function showPrevImg() {
  images.unshift(images.pop()) 
  changeText()	
}

function changeText(){
	currentImg.parentElement.style.display='none';	
	currentImg=images[1];
	currentImg.parentElement.style.display='block';
	prevButton.textContent=images[0].dataset.food;
	nextButton.textContent=images[2].dataset.food;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.