Good morning people!

I have a difficult question to solve.

Actually, I do not even want a solution, but I teach:

So imagine an ul with, say, 5 li's. These li's are inline-block.

I'll apply a slideShow effect on them so they run from right to left. So far without mysteries: It works well.

My question is this: For each li that runs, a smooth running effect is applied from -0% to -100% in its (normal) position. This, of course, added 100 to 100 to each passing li. No surprise.

The doubt:

When the li's come to the end, when the first li replays again, it does not appear at the same time, but it seems that before starting the second sequence, the slider gives a little time, which here in the case seems to be of some 4 seconds, and then the first li appears as a simple display: none for the last and display: block on the first.

What I would like is that when the first sequence is finished, the second one starts together, that is, then, as if they were more in line.

The way it looks at the end of the question.

Here is the code I am using:

1. $(document).ready(function(e) {
2. 
   
3.   var tempoTransicao = 20;
4.   var quantasImagens = $("div.slider ul.slide li img").size();
5.   var tamanhoIntervalos = 100/quantasImagens;
6.   var tempoImagens = 0;
7.   var tMax = 0; 
8. 
   
9.   var obj = new Array();
10. 
    
11.   for (i = 0; i < quantasImagens; i++) {
12. 
    
13.     tMin = tMax;
14.     tMax += tamanhoIntervalos;
15. 
    
16.     obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
17.     obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
18. 
    
19.     tempoImagens += 100;
20. 
    
21.   }   
22. 
    
23.   console.log(obj);
24. 
    
25.   $.keyframe.define(
26.     [
27.       $.extend(
28.           { name: 'tocaSlide' }, 
29.           obj
30.         )
31.     ]
32.   );
33. 
    
34.   $("div.slider ul.slide").css({
35.     'animation-duration' : tempoTransicao + 's',
36.     'width' : (100.1 * quantasImagens) + '%',
37.   });
38. 
    
39. });
40. 
    

If I put inside the for:

1. if (i == how many Images - 1) obj ['100%'] = {'margin-left': '0%'};
2. So when you get to the last li, the slider comes back li li li to the first and resumes.

But that's not what I want.

What I want is the sequence to continue:

If i do as below after the loop, it only occurs from the first image appears after the last one. But this does not solve the problem of the first read abruptly.

1. $ ("div.slider ul.slide li: first"). insertAfter ($ ("div.slider ul.slide li: last"));
2. $ ("div.slider ul.slide"). css ('margin-left', '-' + 100 + '%');

How to proceed to do this?

I made an image to exemplify what I want.