[slavAAvals]

Имеется некоторое кол-во фотокарточек с описанием.

<div class="kap-show__list">
		<div class="kap-show__list-item">
			<div class="kap-show__list-img">
				<a href="img/sections/services/foto0.jpg" class="list-img__link"><img src="img/sections/services/foto0.jpg" alt="foto0" class="list-img__foto"></a>
			</div>
			<div class="kap-show__list-text">
				<ul class="list-text__items">
					<li class="list-text__descr"><span> Адрес: </span>  <span  class="list-text__items--brown">пл.Заводская д.12</span></li>
					<li class="list-text__descr"><span>Помещение: </span><span  class="list-text__items--brown">Прихожая</span></li>
					<li class="list-text__descr"><span>Дата: </span> <span  class="list-text__items--brown">22.01.2016</span></li>
				</ul>
			</div>
		</div>
		<div class="kap-show__list-item">
			<div class="kap-show__list-img">
				<a href="img/sections/services/foto1.jpg" class="list-img__link"><img src="img/sections/services/foto1.jpg" alt="foto0" class="list-img__foto"></a>
			</div>
			<div class="kap-show__list-text">
				<ul class="list-text__items">
					<li class="list-text__descr">Адрес: <span  class="list-text__items--brown">пл.Заводская д.12</span></li>
					<li class="list-text__descr">Помещение: <span  class="list-text__items--brown">Прихожая</span></li>
					<li class="list-text__descr">Дата: <span  class="list-text__items--brown">22.01.2016</span></li>
				</ul>
			</div>
		</div>
</>

При нажатии на изображение - всплывает скрытое меню

<div class="kap-show__hidden-gallery  kap-show__gallery">
	<div class="kap-show__gallery-list">
        	<a href="#" class="gallery-link"><img class="gallery-item" src="#" alt="foto"  id="hiddenImg"></a>
	        <a class="gallery-item__close" href="#">  &#10006; </a>
	</div>
	<button class="gallery-item__left-btn"><</button>
	<button class="gallery-item__right-btn">></button>
</div>

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

// HTML коллекция картинок
var imgClass = document.getElementsByClassName("list-img__foto");
// Делаем из неё массив
var collection = Array.prototype.slice.call(imgClass);

// Кнопки управления

var btnLeft = document.querySelector('.gallery-item__left-btn');
var btnRight = document.querySelector('.gallery-item__right-btn');

// Скрытое меню
var fotoGallery = document.querySelector('.kap-show__gallery');

//Скрытый img менюшки
var hiddenImg = document.getElementById('hiddenImg')

//  Кнопка для закрытия меню
var closeGallery = document.querySelector('.gallery-item__close');

for (var i = 0; i < imgClass.length; i++) {
    imgClass[i].addEventListener('click', imageClick, false);
}

closeGallery.onclick = function(e) {
    e.preventDefault();
    fotoGallery.classList.toggle('kap-show__hidden-gallery');
}

function imageClick(e) {
    e.preventDefault();
    fotoGallery.classList.toggle('kap-show__hidden-gallery');
    hiddenImg.setAttribute('src', e.target.src);
};

Так вот, я создал массив из картинок.
Скорей всего надо взять у них src и каким-то образом по клику на кнопку влево или вправо - менять эти картинки местами.

Пробовал сделать слайдер, но опять же! получится, что надо создавать блочок с определённым кол-вом изображений внутри.
Я же хочу получить, возможно, используя разные классы - разные массивы, которые буду перебирать и выставлять нужный src.