Некорректно работает циклический слайдер

237

07 июня 2018, 13:00

Есть циклический слайдер, в котором ушедший влево кадр обрезается и вставляется в конец. Проблема заключается в том, что при обрезке этого кадра вся лента сдвигается, из-за этого нарушается очередность и плавность перехода. Как исправить? P.S. предлагайте, пожалуйста, варианты на чистом JavaScript

var strip = document.getElementById('filmstrip'); 
strip.onclick = move; 
var selfMove = setTimeout(move , 4000); 
var left = 0; 
var length = strip.clientWidth; 
function move() { 
	left=left - length; 
	strip.style.left= left + 'px'; 
    clearTimeout(selfMove); 
    selfMove = setTimeout (move , 4000); 
     
    var adv = document.querySelectorAll('.filmstrip>img'); 
    var clone1 = adv[0].cloneNode(true); 
    if ( left<-length) { 
       strip.appendChild(clone1); 
       } 
     
    if ( left<-length){ 
    	adv[0].remove(); 
    	 
 
    } 
     
     
}

.slider{ 
	overflow: hidden; 
	border:10px solid black; 
	width:80%s; 
	height:auto; 
	margin:0 auto; 
} 
.filmstrip{ 
	position: relative; 
	left:0; 
	display:inline-block; 
	white-space: nowrap; 
	font-size:0; 
	transition:left 1s; 
	 
} 
.filmstrip>img{ 
	width:100%; 
	height:auto; 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<title>CRAFTBEER-SHOP</title> 
<meta name="keywords" content=" "> 
<meta name="description" content=""> 
<meta charset="utf-8"> 
</head> 
<body> 
<header class="page-header"> 
 
</header> 
<main class="page-main"> 
<div class="slider"> 
      <div class="filmstrip" id="filmstrip"> 
      <img src="1.jpg" id="advertisement1" class="ad"> 
      <img src="2.jpg" id="advertisement2" class="ad"> 
      <img src="3.jpg" id="advertisement3" class="ad"> 
      <img src="4.jpg" id="advertisement4" class="ad"> 
      <img src="5.jpg" id="advertisement5" class="ad"> 
      </div> 
    </div> 
</div> 
</main> 
<script> 
 
</script> 
</body> 
</html>