How to create loop transition animation with css transform

问题

Can anybody help me create a loop animation transition with css transform.

I have created a simple slider that uses transform to move items. the problem is when I move to right and the value of translate is from translate3d(-544px, 0px, 0px) to translate3d(-272px, 0px, 0px) it will have a transition from left to right, I want the transition effect to continue moving right to left when next button is click.

and also do similar thing when the previous button is used. I'm pretty sure this is achievable as owlCarousel implemented their infinite loop animation like what Im trying to achieve, you can see it from here https://codepen.io/anon/pen/GPwwmz

Here's the fiddle I have created https://jsfiddle.net/6ofhs3jq/

Would appreciate any help,

Thanks

回答1:

You need to do the same principle in the answer I left into the question you asked jquery-javascript-loop-slider-item, is almost the same thing.

Remember you can create and infinitive loop transition with translate3d without JS heliping, you need to clone to make you carousel infinitive while user navigate between arrow directions.

1. You need to fix the images sizes (width).
2. All the images need the same width, to be able to use your translate3d to create an infinitive loop.
3. When you are reacing the last and first element of the carousel you need to clone the elements and put them into the right side to create and infinitive loop.

You can learning more by reading the code into the Owl Carousel Library

来源：https://stackoverflow.com/questions/54167008/how-to-create-loop-transition-animation-with-css-transform