javascript - What is the principle of end-to-end carousel in js?

Question

General carousels are known to be implemented by changing the left of the image parent container, but what about the principle of carousels that are connected end to end?

How to control JS?

Answer 1

Let me tell you my thoughts, I hope it can help you. I use Jquery.
<ul>
<li><img>1</li>
<li><img>2</li>
<li><img>3</li>
< li><img>4</li>
.....
<ul>
Get all li tags $("li"). Click the left or right move button, and ul will move left and right by XX pixels (each li is the same size, move the width of one li)
Move the first $("li").eq[0] to the left and place it in ul Last (appendTo); moving right puts the last li at the front (prependTO).
Add some animation effects animate() to make it look better.

Answer 2

Connect end to end, right? I have seen some related carousel principles before. Generally speaking, the first one is switched to the second one by moving a little bit with js. Then when it comes to the last one, we can add another one after the last one. A copy of a picture, and then switching from the last picture to the clone of the first picture is also a little bit of movement switching. However, after the switching is completed, it is immediately changed to the position of the real first picture, which is left: 0. At this time, the next step is to switch from the first picture to the second picture happily. - - I wonder if this is what the questioner asked?

Answer 3

Give me an idea

You can imagine each picture in the carousel component as an independent individual, rather than being connected with other pictures in a row as a whole

Every time the picture is switched, the user can only see 2 pictures: the current picture and the next picture. The remaining pictures no matter where the real position is, as long as the user cannot see it
So whenever they need to switch , we just need to prepare these 2 pictures and set their corresponding displacement animations. The so-called end-to-end connection, just put the "head" behind the "tail" and then animate it

The same is true if you want to switch to the previous picture, just prepare the current picture and the previous picture and set their displacement animation

Also a reminder, on the mobile terminal it is best to use transform: translate3d(x, 0, 0) to perform displacement. This can enable gpu acceleration, otherwise the animation will be stuck

Answer 4

It’s actually very simple. Suppose there are five pictures originally, and the structure is as follows:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
<ul>

You turn it into:

<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
<ul>

When the first picture slides to the left, reset left to the fifth picture after the animation ends, and vice versa!

Answer 5

Carousel image I prefer to dynamically change src

Answer 6

Does the questioner know about queues and stacks? If so, it will be easy to explain. The carousel chart is a queue, and elements that are dequeued are re-entered into the queue

Answer 7

Use 2 sets of the same pictures and move them through transition and modify left.

When left to the first picture in the second group, directly turn off trantition and left to the first picture in the first group, and then turn on transition

Answer 8

The principle is: assuming you move to the left, after each move, move the p of the leftmost picture to the right, that is, move the first p to the last, and at the same time modify the value of the left of the large container and add a The width of the image.

Answer 9

If you use jquery, you can use insertAfter and insertBefore