[vitek-82]

Здравствуйте. Решил сделать карусель.

Есть массив с адресами картинок.

Нужно чтобы в блоке "gallery" с "overflow: hidden" картинки из массива двигались по горизонтали с остановками. Когда массив заканчивается, все начиналось сначала.

Меня затруднил момент когда необходимо начать прокрутку заново. Карусель я сделал, но это получились кастыли. Может подскажете другие способы (более красивые что-ли). Спасибо.

моя карусель:

<style>

#gallery {
    position: relative;
    width: 200px;
    overflow: hidden;
    height: 200px;
    border: 1px solid;
}

</style>

-------------------------

<div id="gallery"></div>

-------------------------

var images = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg'];
var gallery = document.getElementById('gallery');

function getImg(){
	images.push(images.shift());
	var img = document.createElement('img');
		img.src = images[0];
		img.style.cssText = 'position: absolute;\
							width: 200px;\
							height: 200px;\
							left: 200px;\
							transition: left 0.5s linear';
	return img;
};


if(!gallery.children.length){

	gallery.appendChild(getImg());
	gallery.appendChild(getImg());
	gallery.children[0].style.left = '-200px';
	gallery.children[1].style.left = '0px';

};

var stop = setInterval(function(){
			gallery.children[0].remove();
			gallery.appendChild(getImg());
			setTimeout(()=>{gallery.children[0].style.left = '-200px'; gallery.children[1].style.left = '0px';}, 1);
}, 2000);