Слайдер в модальном окне.

[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.

[рони]

slavAAvals,
непонятно в чём проблема и может поставить http://fancyapps.com/fancybox/ и не мучатся, этот плагин умеет всё что вы задумали и больше.

[slavAAvals]

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

[slavAAvals]

Прибавляя к предыдущему коду

var collection = Array.prototype.slice.call(imgClass);
collection.forEach(function(item) {
var x = item;
console.log(x.src);
})

я могу разглядеть src каждого элемента. Осталось понять, как использую кнопки "влево" "вправо" можно их менять.

[рони]

slavAAvals,
чтобы ползать по массиву нужен только индекс ... где-то было ...

[рони]

slavAAvals,

заведите переменную для индекса и отнимайте или прибавляйте проверяйте на минимум и максимум и выбирайте согласно этому индексу

[slavAAvals]

что-то никак не получается...

[рони]

slavAAvals,

window.addEventListener('DOMContentLoaded', function() {

  // 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');

var index = 0;

collection.forEach(function(img,i) {
        img.addEventListener('click', function(event) {
          event.preventDefault();
          index = i;
          show()
        },false);
    });


closeGallery.addEventListener('click', function(e) {
    e.preventDefault();
    fotoGallery.classList.add('kap-show__hidden-gallery');
},false)

btnLeft.addEventListener('click', function(e) {
    e.preventDefault();
    index--
    index < 0 && (index = collection.length-1);
    show()
    ;
},false)

btnRight.addEventListener('click', function(e) {
    e.preventDefault();
    index++
    index >= collection.length && (index = 0);
    show()
},false)

function show() {
    fotoGallery.classList.remove('kap-show__hidden-gallery');
    hiddenImg.src = collection[index].src;
};
   });

[slavAAvals]

как же всё просто, когда это пишешь не сам.
но с опытом должно пройти.
спасибо.