javascript - native js carousel chart

Question

Recently tinkering with native js carousel images

I added a transition to the switching, so there is a big connection problem from the last picture to the first picture.

The idea is to append the first picture after the last picture, and then remove the first picture from the parent element

1231This is the way of thinking

Is there any master who has written similar code? You can refer to it

Answer 1

I made one, based on the logic of the sex demon Aunt Zhang.

The arrangement is: 1 2 3 4 5 1

The last picture transitions to the first picture, and the last 1 is displayed. Because it's sequential, the glide is silky smooth.

Key: After 5 to 1, directly restore width: 0. At this time, it becomes the initial state again. Because all 1s are displayed, there are almost no flaws.

I also tried to move it to the end of the queue every time I slid it, but it was too troublesome to implement and gave up.

Answer 2

No need to remove, just append an existing node directly to move it. Then it's time to change the scroll bar.

Answer 3

https://github.com/cubiq/Swip...
My first slider was based on this, written by the author of IScroll

Answer 4

There is no need for that, and the fewer operations on the DOM node, the better. For example, if you use this sorting order 5 1 2 3 4 5 1,
When scrolling from 5 to 1 to the right, the moment the animation is completed, the For the class with transition, readjust the position to the first 1, and then reassign the class with transition. The same goes from 1 to 5 to the left. The principle is to use visual deception, because the first 2 and the 1 after the 5 on the right have the same style and there is no difference, so the purpose can be achieved.