Здравствуйте. Решил сделать карусель.
Есть массив с адресами картинок.
Нужно чтобы в блоке "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);
