function showOneElementOnly(imgs, i){
  // first hide all
  for(let i=0; i<imgs.length; i++){
    imgs[i].style.opacity = "0";
  }

  // now display the one you need
  let image = imgs[i];
  if(image.complete){
    image.style.opacity = "1";
    spinner_overlay.style.display = "none";
  }
}

function setNextElementIndex(arr,n){
  // here we set the global images index
  slidesIndex += n;

  if(slidesIndex === -1  || slidesIndex===undefined){
    slidesIndex = arr.length-1;
  }
  if(slidesIndex===arr.length){
    slidesIndex = 0;
  }

  console.log(slidesIndex);
}
function getNextIndex(arr, increment){
  // here we set the global images index
  slidesIndex += increment;

  if(slidesIndex === -1  || slidesIndex===undefined){
    slidesIndex = arr.length-1;
  }
  if(slidesIndex===arr.length){
    slidesIndex = 0;
  }

  return slidesIndex;
}

function showNextOrPrevImage(event, next) {
  // if the function is called from addEventListener event will be a non empyt object.
  // but if the function is called from setInterval, event will be an undefind

  // sliderIntervalId will be set, only if the interval was started
  if( event && sliderIntervalId ){
    clearInterval(sliderIntervalId);
    sliderIntervalId = undefined;
  }

  let increment = next ? +1 : -1;
  let slidesIndex = getNextIndex(imgs, increment);

  console.log(`slidesIndex: ${slidesIndex}`);
  showOneElementOnly(imgs, slidesIndex);
}

let spinner_overlay = document.querySelector('.spinner_overlay');
let imgs = document.querySelectorAll('.imgWrapper img');
let btnNext = document.querySelector('.next');
let btnPrev = document.querySelector('.prev');
let sliderIntervalId;

let slidesIndex = 0;


btnNext.addEventListener('click', function (event) {
  showNextOrPrevImage(event, true)
} );
btnPrev.addEventListener('click', function (event) {
  showNextOrPrevImage(event, false)
} );

window.addEventListener('load', function () {
  sliderIntervalId = setInterval(showNextOrPrevImage, 2000, undefined, true);
})

// start slide show:
// sliderIntervalId = setInterval(showNextOrPrevImage, 2000, undefined, +1);
// or if we just want an image to be shown:
// showNextImage();

@@ -2,38 +2,29 @@
 unction show
-OneElementOnly
+Image
 (imgs, i)%7B%0A 
@@ -41,16 +41,23 @@
 hide all
+ images
 %0A  for(l
@@ -152,11 +152,10 @@
 one 
-you
+we
  nee
@@ -179,16 +179,17 @@
 mgs%5Bi%5D;%0A
+%0A
   if(ima
@@ -201,16 +201,42 @@
 mplete)%7B
+ // if the image is loaded
 %0A    ima
@@ -314,285 +314,8 @@
 %0A%7D%0A%0A
-function setNextElementIndex(arr,n)%7B%0A  // here we set the global images index%0A  slidesIndex += n;%0A%0A  if(slidesIndex === -1  %7C%7C slidesIndex===undefined)%7B%0A    slidesIndex = arr.length-1;%0A  %7D%0A  if(slidesIndex===arr.length)%7B%0A    slidesIndex = 0;%0A  %7D%0A%0A  console.log(slidesIndex);%0A%7D%0A
 func
@@ -1124,22 +1124,13 @@
 show
-OneElementOnly
+Image
 (img
@@ -1646,16 +1646,39 @@
 on () %7B%0A
+  // start slide show:%0A
   slider
@@ -1751,110 +1751,11 @@
 e);%0A
-%7D)%0A%0A// start slide show:%0A// sliderIntervalId = setInterval(showNextOrPrevImage, 2000, undefined, +1);%0A
+%0A  
 // o
@@ -1794,16 +1794,18 @@
  shown:%0A
+  
 // showN
@@ -1811,13 +1811,37 @@
 Next
-Image();
+OrPrevImage(undefined, true);%0A%7D)
 %0A

clean code