Как перемещаться внутри массива с помощью addEventListener?

Я пытаюсь настроить слайдер для проекта. У меня есть массив объектов, каждый объект содержит изображение и легенду. Каждый раз, когда пользователь нажимает кнопку «Далее» или «Предыдущий», он должен отображать следующий или предыдущий объект массива. Проблема в том, что он отображает одно и то же изображение вместо следующего, третьего, пятого и так далее.

var index = 0;
var images = [
    {image: 'images/1.jpg', legend: 'Street Art'},
    {image: 'images/2.jpg', legend: 'Fast Lane'},
    {image: 'images/3.jpg', legend: 'Colorful Building'},
    {image: 'images/4.jpg', legend: 'Skyscrapers'},
    {image: 'images/5.jpg', legend: 'City by night'},
    {image: 'images/6.jpg', legend: 'Tour Eiffel la nuit'}
];
var previous = document.getElementById('slider-previous');
var next = document.getElementById('slider-next');

next.addEventListener('click', function() {
    img.src= images[index++].image;
    figcaption.textContent = images[index++].legend;
});
previous.addEventListener('click', function() {
    img.src= images[index--].image;
    figcaption.textContent = images[index--].legend;
});