Problemas em criação de slide personalizado

Estou fazendo um slide,

Nele, tenho 2 problemas que não encontro solução e peço a ajuda de vocês!

Problemas que existem agora:

A) Quando o slide começa, no arranque, está sem o efeito. Mas só o arranque mesmo, depois tudo sai corretamente e o feito funciona tanto na ida quanto na volta.

B) Perceba que eu crio uma UL clone, e, em algumas rodadas a primeira LI dela está sobrepondo um pouco sobre a ultima LI da UL anterior em uma volta. Já em outra volta vai normal e numa outra volta acaba dando um espaço maior entre as LIs. Acho que erro de arredondamento ou de conta!

Pode notar no inicio do JS o trecho

$(".itens").css('transition','all 1s ease');

Que tecnicamente deveria adicionar o efeito antes mesmo do loop começar.

Sendo assim, não consigo ver motivo do arranque não ter o efeito

Coloquei no codepen.io para vocês verem os problemas acontecendo!:

https://codepen.io/carcleo/pen/RwPGeMN

CSS:

* {

	border:0;
	padding: 0;
	margin: 0;
	outline: 0;
	box-sizing: border-box;
}

body {

	display:flex;
	width: 1040px;
	margin: 0 auto;
	justify-content: center;
}

.slider > * {

	border:0;
	padding: 0;
	margin: 0;
	outline: 0;
	box-sizing: border-box;
}
.slider {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 height: 130px;
 border: 0;
}

.slider > #holder {

 position: relative;
 display: flex;
 overflow: hidden;
}

.slider > #holder > #uls {

 position: relative;
 display: flex;
}

.slider > #holder > #uls > ul {

 position: relative;
 display: flex;
}

.slider > #holder > #uls > ul > li {

 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 200px;
 height: 100px;
}

.slider > #holder > #uls > ul > li > a {

 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
}

.slider > #holder > #uls > ul > li > a > img {

	height: 100%;
}

.slider > #title {

	position: absolute;
 align-items: center;
 justify-content: center;
	display: none;
	width: 100px;
	height: 30px;
	top: 50px;
	right: calc(50% - 25px);
	background: #999;
	border: 1px solid #ccc;
}

.slider > #controles {

 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 30px;
}

.slider > #controles > button {

 display: flex;
 align-items: center;
 justify-content: center;
 width: 30px;
 height: 30px;
 cursor: pointer;
 margin: auto 5px;
 border-radius: 50%;
 opacity: .2;
}

.slider > #controles > button:hover {

 opacity: 1;
 border: 1x solid #ccc;
}

	**HTML:**

	 

<div class="slider">

	<div id="holder">

 <div id="uls">

 <ul class="itens">

 <li><a href=''><img src='img/sites/ctemcasb.png'></a></li>

 <li><a href=''><img src='img/sites/fielcard.png'></a></li>

 <li><a href=''><img src='img/sites/funerariasaopedro.png'></a></li>

 <li><a href=''><img src='img/sites/gasmuriae.png'></a></li>

 <li><a href=''><img src='img/sites/hotplateprensas.png'></a></li>

 <li><a href=''><img src='img/sites/mariasvaidosas.png'></a></li>

 </ul>

 </div>

	</div>

	<span id="title">Pausado</span>

	<div id="controles">

 <button id="back"> < </button>
 <button id="next"> > </button>

	</div>

</div>

<script type="text/javascript" src="scripts/js/jquery.js"></script>

	**JAVASCRIPT**

$(document).ready( function() {

	//cria as variáveis NÃO modificáveis;
	var container = $("div.slider"),
 holder = $(container).find("div#holder"),
 uls = $(holder).find("div#uls"),
 ul = $(uls).find("ul"),
 lis = $(ul).find("li"),
 tamanhoLi = Math.round ( $(lis).first().width() ),
 numeroLis = Math.round ( $(lis).length ),
 tamanhoUl = Math.round ( tamanhoLi * numeroLis ),
 controles = $(container).find("div#controles"),
 span = $(container).find("span#title"),
 btnVoltar = $(controles).find("button#back"),
 btnAvancar = $(controles).find("button#next");

	//cria as variáveis modificáveis;
	var numeroSlidesMostra = 4,
 tempoIntervalo = 2000;

	//determina a largura da div que abrigará as UL's.
	$(holder).width(numeroSlidesMostra * tamanhoLi);
	//determina a largura das ULs partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(ul).width(tamanhoUl);
	//acresenta efeito de transição na UL
	$(".itens").css('transition','all 1s ease');

	//fazendo um clone no final da da div de ULs
	$(ul).clone().appendTo(uls);

	//função avançar
	function avancar () {

 $(".itens").each (function() {

 console.log ( Math.round ( $(this).position().left ) );

 if ( Math.round ( $(this).position().left ) <= -Math.round ( $(ul).width() ) )
 $(this).css({
 "transition" : "none",
 "left" : "+=" + ( ( 2 * tamanhoUl ) - tamanhoLi )
 }) ;
 else
 $(this).css({
 "transition" : "all 1s ease",
 "left" : "-=" + tamanhoLi
 }) ;

 });

	}

	//função voltar
	function voltar () {

 $(".itens").each (function() {

 console.log ( Math.round ( $(this).position().left ) );

 if ( Math.round ( $(this).position().left ) >= Math.round ( $(holder).width() ) )
 $(this).css({
 "transition" : "none",
 "left" : "-=" + ( ( 2 * tamanhoUl ) - tamanhoLi )
 }) ;
 else
 $(this).css({
 "transition" : "all 1s ease",
 "left" : "+=" + tamanhoLi
 }) ;

 });

	}

	//código do onClick no botão avancar
	btnAvancar.click ( function (e) {
 clearInterval(loop);
 avancar();
 loop = setInterval( avancar, tempoIntervalo);
	});

	//código do onClick no botão voltar
	btnVoltar.click ( function (e) {
 clearInterval(loop);
 voltar();
 loop = setInterval( avancar, tempoIntervalo);
	});

	//dispara o loop na função avançar
	var loop = setInterval( avancar, tempoIntervalo );

	//para e reinicia o loop ao passar/retirar o mouse sobre o slide
	holder.mouseover(function(){
 clearInterval(loop);
 //mostra a mensagem
 span.css("display", "flex");
	}).mouseout(function(){
 loop = setInterval( avancar, tempoIntervalo );
 //esconde a mensagem
 span.css("display", "none");
	});

})