Javascript-форум - Правильное позиционирование задних элементов в галереи

Всем привет.
Есть вот такой вот слайдер
https://your-teachers.ru/Krisna/
Там есть видимая часть картинок, они как будто сложены стопкой,
и последняя из них видна.
При нажатии на зеленую кнопку он перемещает текущую картинку вправо, и задние элементы становятся передними.
при нажатии на красную кнопку все должно происходить в точности до наоборот, картинка должна появятся слева а те элементы что там уже есть должны сдвигаться на 1 назад.

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

Сразу после нажатия на красную кнопку впервый раз html код галереи выглядит так
http://prntscr.com/rarnth
а мне нужно что б он был такой
http://prntscr.com/rarqel

За их смену и позиционирование отвечает вот такой блок кода из файла main.js
И пока что мне так и не удалось правильно его модифицировать

// set style for the other items
		for(var i = 0; i < this.itemsTotal; ++i) {
			if( i >= this.options.visible ) break;

			if( !this.options.infinite ) {
				if( this.current + i >= this.itemsTotal - 1 ) break;
				var pos = this.current + i - 1;
			}
			else {
				var pos = this.current + i < this.itemsTotal - 1 ? this.current + i + 1 : i + (this.itemsTotal - this.current - 1);
			}
console.log('current',this.current,'itemsTotal',this.itemsTotal,'i',i,'pos',pos);
			var item = this.items[pos],
				// stack items animation
				animateStackItems = function(item, i) {
					item.style.pointerEvents = 'auto';
					item.style.opacity = 1;
					item.style.zIndex = parseInt(self.options.visible - i);
					
					dynamics.animate(item, {
						translateZ : parseInt(-1 * 50 * i)
					}, self.options.stackItemsAnimation);
				};