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

<div class="menu-img">
  <ul class="menu-img__list">
    <li class="menu-img__item current-img"><img 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 src="https://www.simigeriapetru.ro/uploads/products/Pizza-Regina-Simigeria-PETRU.png"</li>
    <li class="menu-img__item"><img 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 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 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 buttons"></button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
  font-family: sans-serif;
}

.buttons {
  border: none;
  background: none;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  background: pink;
  padding: 10px 0;
  width: 150px;
  border-radius: 3px;
  cursor: pointer;
}
.menu-img__list {
  list-style-type: 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']

const nextButton = document.querySelector('.nextButton')
const prevButton = document.querySelector('.prevButton')
const menuImg = document.querySelectorAll('.menu-img__item')

let nextButtonIndex = 1;
let prevButtonIndex = arr.length - 1
let imgIndex = 0;

nextButton.innerHTML = arr[1];
prevButton.innerHTML = arr[arr.length - 1]
  

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

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

function shiftNext() {
  
  nextButtonIndex++
  prevButtonIndex++
  
  if(nextButtonIndex > arr.length - 1) {
    nextButtonIndex = 0
  }
  if(prevButtonIndex > arr.length - 1) {
    prevButtonIndex = 0
  }
  
  nextButton.innerHTML = arr[nextButtonIndex];  
  prevButton.innerHTML = arr[prevButtonIndex];
}

function shiftPrev() {
  
  nextButtonIndex--
  prevButtonIndex--
  
  if(nextButtonIndex < 0) {
    nextButtonIndex = arr.length - 1
  }
  if(prevButtonIndex < 0) {
    prevButtonIndex = arr.length - 1
  }
  
  nextButton.innerHTML = arr[nextButtonIndex];  
  prevButton.innerHTML = arr[prevButtonIndex];
}

// function showNextImg() {
//   imgIndex++
//   const currentImg = document.querySelector('.current-img')
//   const nextImg = currentImg.nextElementSibling
  
//   if(imgIndex > menuImg.length - 1) {
//     imgIndex = 0;
    
//     currentImg.classList.remove('current-img')
//     menuImg[0].classList.add('current-img')
//   }
  
//   currentImg.classList.remove('current-img')
//   nextImg.classList.add('current-img')  
// }
function showNextImg() {
  imgIndex++
  const currentImg = document.querySelector('.current-img')
  //////////////////
  const nextImg = (currentImg.nextElementSibling)?  currentImg.nextElementSibling:menuImg[0];
  /////////////////
  if(imgIndex > menuImg.length - 1) {
    imgIndex = 0;
    
    currentImg.classList.remove('current-img')
    menuImg[0].classList.add('current-img')
  }
  
  currentImg.classList.remove('current-img')
  nextImg.classList.add('current-img')  
}


// function showPrevImg() {
//   imgIndex--
  
//   const currentImg = document.querySelector('.current-img')
//   const nextImg = currentImg.previousElementSibling
  
//   if(imgIndex < 0) {
//     imgIndex = menuImg.length - 1;
    
//     currentImg.classList.remove('current-img')
//     menuImg[menuImg.length - 1].classList.add('current-img')
//   }
  
//   currentImg.classList.remove('current-img')
//   nextImg.classList.add('current-img')  
// }


function showPrevImg() {
  imgIndex--  
  const currentImg = document.querySelector('.current-img')
  /////////////
  const nextImg = (currentImg.previousElementSibling) ? currentImg.previousElementSibling : menuImg[menuImg.length-1] ;
  //////////////
  if(imgIndex < 0) {
    imgIndex = menuImg.length - 1;
    
    currentImg.classList.remove('current-img')
    menuImg[menuImg.length - 1].classList.add('current-img')
  }
  
  currentImg.classList.remove('current-img')
  nextImg.classList.add('current-img')  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.