animate não para mesmo com velocidade igual a zero

[Carlos Rocha]

Tenho o slide abaixo que estou fazendo com Jquery, css e html e animate.

O PROBLEMA:

Quando, no Javascript, o script entrar no bloco abaixo

if (  $(slidesHolder).position().left <= -tamanhoUl )

A animação devera NÃO existir e a transição correr de forma abrupta, instantânea.

No então, mesmo fazendo a velocidade igual a 0 o efeito ainda ocorre!

Pergunta: O que não está certo?

CSS:

* {
	border:0;
	padding: 0;
	margin: 0;
	outline: 0;	
	box-sizing: border-box;
}
body {
	display:flex;
	width: 1040px;	
	margin: 0 auto;
	justify-content: center;
}
.no-transition {
	transition: none !important;
}
.slider > * {	
	border:0;
	padding: 0;
	margin: 0;
	outline: 0;	
	box-sizing: border-box;
}
.slider {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 130px;
   border: 0;   
}
.slider > #slides {
   position: relative;
   display: flex;
  /* overflow: hidden; */
}
.slider > #slides > #slidesHolder {
   position: relative;
   display: flex;
   transition: all 1s ease;
}
.slider > #slides > #slidesHolder > ul {
   position: relative;
   display: flex;
   list-style: none;
}
.slider > #slides > #slidesHolder > ul > li {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 100px;
}
.slider > #slides > #slidesHolder > ul > li > a {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}
.slider > #slides > #slidesHolder > 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="slides">

		<div id="slidesHolder">

			<ul>

				<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Javascript

$(document).ready( function() {

	//cria as variáveis modificáveis;
	var numeroSlidesMostra =   4,
		tempoIntervalo     =   2000,
		caminho            =   0;
		
	//cria as variáveis NÃO modificáveis;
	var container          =   $("div.slider"),
		slides             =   $(container).find("#slides"),
		slidesHolder       =   $(slides).find("#slidesHolder"),
		slide              =   $(slidesHolder).find("ul"),
		lis                =   $(slide).find("li"),
		tamanhoLi          =   $(lis).first().outerWidth(),
		numeroSlides       =   $(lis).length,
		tamanhoUl          =   tamanhoLi * numeroSlides,
		slideClone         =   $(slide).clone(),
		controles          =   $(container).find("div#controles"),
		span               =   $(container).find("span#title"),
		btnVoltar          =   controles.find("button#back"),
		btnAvancar         =   controles.find("button#next");

	//determina a largura da div que abrigará as UL's.
	$(slides).width(numeroSlidesMostra * tamanhoLi);
	//determina a largura de cada UL partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slide).width(tamanhoUl);
	//determina a largura de cada UL clone partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slideClone).width(tamanhoUl);
	//cria uma cópia antes
	$(slideClone).clone().prependTo($(slidesHolder));
	//cria uma cópia depois
	$(slideClone).clone().appendTo($(slidesHolder));
	
	function avancar () {	
		
		if (  $(slidesHolder).position().left <= -tamanhoUl )
			$(slidesHolder).animate({
				"left" : 0
			}, 0);		
		else
			$(slidesHolder).animate({
				"left" : "-=" + tamanhoLi
			}, 1000);			
		
	}


	function voltar () {
		
		if (  $(slidesHolder).position().left >= tamanhoUl )	
			$(slidesHolder).animate({
				"left" : tamanhoUl
			}, 0);
		else
			$(slidesHolder).animate({
				"left" : "+=" + tamanhoLi
			}, 1000);	
		
	}
	
	//código do onClick no botão avançar	
	btnAvancar.click ( function () {

		avancar();		
		
	});
	
	//código do onClick no botão voltar
	btnVoltar.click ( function () {

		voltar();		
		
	});

	//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
	slides.mouseover(function(){
		clearInterval(loop);
		//mostra a mensagem 
		span.css('display', 'flex');
	}).mouseout(function(){
		loop = setInterval( avancar, tempoIntervalo);	
		//esconde a mensagem 
		span.css('display', 'none');
	});
	
})

 

Editado Março 3, 2020 por Carlos Rocha