Wrote just such a carousel:

HTML <div class="mid"> <input class="myButton" value="◀" type="button" id="toLeft"> <div class="carousel"><!-- --><img src="https://js.cx/carousel/1.png" alt="A"><!-- --><img src="https://js.cx/carousel/2.png" alt="B"><!-- --><img src="https://js.cx/carousel/3.png" alt="C"><!-- --><img src="https://js.cx/carousel/4.png" alt="D"><!-- --><img src="https://js.cx/carousel/5.png" alt="E"><!-- --></div> <input class="myButton down" value="▶" type="button" id="toRight"> </div>

CSS

 .carousel { display: block; overflow: hidden; } img { display: inline-block; position: relative; left: 0px; transition-timing-function: linear; transition-duration: 0s; } .carousel .slow { transition-duration: 0.3s; }

Js

 "use strict"; let leftButton = document.querySelector("#toLeft"); let rightButton = document.querySelector("#toRight"); leftButton.addEventListener("click", moveToTheLeft); rightButton.addEventListener("click", moveToTheRight); function moveToTheLeft() { let box = document.querySelector(".carousel"); let items = document.querySelectorAll("img"); box.append(items[0]); } function moveToTheRight() { let box = document.querySelector(".carousel"); let items = document.querySelectorAll("img"); for (let item of items) { item.style.left = "135px"; item.classList.toggle("slow"); setTimeout(moveFast, 310); } setTimeout(prependItem, 315); function moveFast() { for (let item of items) { item.style.left = "0px"; item.classList.toggle("slow"); } } function prependItem() { box.prepend(items[+items.length - 1]); } }

Link to the sandbox: https://codepen.io/muturgan/pen/QQjZRG

I tried to animate it.

First, in the course of thought wrote:

 for (let item of items) { item.style.left = "135px"; item.classList.toggle("fast"); item.style.left = "0px"; item.classList.toggle("fast"); }

There was no visual effect.

I realized that my pictures returned to their place before the transition was over, and delayed the execution of the script using setTimeout, which I think is very awkward. Again, the delay time on the eye is determined.

Is there any more elegant way to wait for the animation to end?

The principle of changing the speed of animation is also not clear (the current method was chosen experimentally). The meaning of the picture must first move slowly and then instantly. So I assigned the rules:

 img {transition-duration: 0.3s;} .fast {transition-duration: 0s;}

and at first the pictures would have to move slowly, then they would be assigned the class fast, and they would instantly jump to their original place. And then the class fast would be cleaned up for the proper execution of the next iteration.

But in practice, everything happened the other way around - the images were instantly transferred to the right and slowly returned to their place. For semantics, I changed the CSS rules in places, and the class called slow. But why pictures of such behavior, I did not understand.

  • you can try to look in the direction of events, for example transitionend - Grundy

1 answer 1

  1. If you want to animate yourself, use requestAnimationFrame, not timeouts. Then your animation will be smooth.
  2. If you animate on js, then do not animate this same element on css. Do not use transition.
  3. If you want to animate on CSS, then manipulate the classes on js. By assigning different classes to elements, you will activate various transitions that you specify for classes.
  4. Elegant - https://greensock.com/

As for your code, do not use setTimeout in a loop until you understand how it works.

  • Well, as if I went on option 3. but thanks for the advice) - muturgan