Заменить изображение на следующее изображение и предыдущее изображение, используя Javascript

Question

Я нахожусь в процессе создания карусели и не могу понять, как заменить мое текущее изображение следующим изображением и предыдущим.Я приложил кодовую ручку и скриншот того, чего я пытаюсь достичь.

Кодовая ручка: https://codepen.io/anon/pen/bmQjRB

JS:

      const img_con = document.getElementById('img-con');
    const img_con1 = document.getElementById('img-con-1');
    const img_con2 = document.getElementById('img-con-2');
    	 const next = document.getElementById('next');
    	 const prev = document.getElementById('prev');
    
    	  const images = ['https://images.unsplash.com/photo-1506126483163-f4d1558dbf85?ixlib=rb-0.3.5&q=85&fm=jpg', 'https://images.unsplash.com/photo-1506252374453-ef5237291d83?ixlib=rb-0.3.5&q=85&fm=jpg', 'https://images.unsplash.com/photo-1525183995014-bd94c0750cd5?ixlib=rb-0.3.5&q=85&fm=jpg']
    
    	  let i = images.length;
    
        next.onclick = ()=> {
        	 i = (i<images.length) ? (i= i+1) : (i=1);
        	 img_con.innerHTML = "<img class='img' src="+images[i-1]+">";
        }
        
        prev.onclick = ()=> {
        	 i = (i<images.length+1 && i>1) ?(i= i-1):(i=images.length);
        	 img_con.innerHTML = "<img class='img' src="+images[i-1]+">";
        }

Answer 1

Я изменил массив изображений, чтобы иметь изображения в соответствующем порядке.

const images = ['https://images.unsplash.com/photo-1525183995014-bd94c0750cd5?ixlib=rb-0.3.5&q=85&fm=jpg',
        'https://images.unsplash.com/photo-1506126483163-f4d1558dbf85?ixlib=rb-0.3.5&q=85&fm=jpg',
        'https://images.unsplash.com/photo-1506252374453-ef5237291d83?ixlib=rb-0.3.5&q=85&fm=jpg'
]

Также вам нужно запустить цикл for, чтобы проверить индекс.Я прилагаю полностью рабочий код для следующего нажатия кнопки.

let i =0;
next.onclick = () => {
        let temp = images[0];
        for (let index = 0; index < images.length; index++) {


            images[index] = images[index + 1];
            if (index === images.length-1 ) {

                images[index] = temp;
            }

        }

        img_con1.innerHTML = "<img class='img' src=" + images[i] + ">";
        img_con.innerHTML = "<img class='img' src=" + images[i + 1] + ">";
        img_con2.innerHTML = "<img class='img' src=" + images[i + 2] + ">";
    }

А для предварительной кнопки вам нужно запустить обратные слова цикла

let j = 0;
    prev.onclick = () => {

        let temp = images[images.length-1];
        for (let index = images.length-1; index >=0; index--) {


            images[index] = images[index - 1];
            if (index === 0 ) {
                console.log(index);
                images[index] = temp;
            }

        }
        img_con1.innerHTML = "<img class='img' src=" + images[j] + ">";
        img_con.innerHTML = "<img class='img' src=" + images[j + 1] + ">";
        img_con2.innerHTML = "<img class='img' src=" + images[j + 2] + ">";
    }