I'm trying to create a psuedo-3d carousel with 5 items like the following (and have them cycle around):

I found this great stackblitz as a starting point, and have been playing with it for hours trying to make it have 5 items instead of 3 but I'm having a really hard time understanding how it works.

If someone smarter than me can help me understand how to make this 5 items it would be great. In particular, I dont understand how this movements variable should be configured, and that is probably the entire secret sauce here.

movements = [
    { pos: 0, right: [1, 2], left: [8, 7] },
    { pos: 2, right: [3, 4, 5, 6, 7], left: [1, 0] },
    { pos: 7, right: [8, 0], left: [6, 5, 4, 3, 2] }
];

CodePudding user response：

sorry, I think I the author. and I explained very bad the code. See that you see in your carousel 5 items at time, So draw a circunference and divide in 8 part. numbered so the most bottom as 0, and to the left 1, 2,... some like

    4
 3     5
2       6
 1     7
    0

The animates (the faces you see) are 0,1,2,6 and 7

animates = [0, 1,2,6,7];

And the position are

movements = [
    { pos: 0, right: [1], left: [7] },
    { pos: 1, right: [2], left: [0] },
    { pos: 2, right: [3,4,5,6], left: [1] },
    { pos: 6, right: [7], left: [5,4,3,2] },
    { pos: 7, right: [0], left: [6] },
  ];

that, e.g. the face is in position 0, to the rigth goes to position 1, to the left goes to position 7 the face is in position 1, to the rigth goes to position 1, to the left goes to position 0 the face is in position 2, to the rigth goes to positions 3,4,5 and 6, to the left goes to position 1.

Well, you need take carefull, when we calculate the angle, you divided by 8 (not by 9)

const animations = mov[direction].map(m => {
    const angle = (m * 2 * Math.PI) / 8; //<--see the "8"   
    ....
}

You can choose, instead of divided by 8, divided by 16, to make the movement more realistic. In this case you see the faces

          8
       7     9
    6          10
  5              11 
 4                12
  3              13
    2          14
      1      15
          0

See that in this case the faces visible are 0,2,4,12 y 14

animates=[0,2,4,12,14]

The positions are

movements = [
    { pos: 0, right: [1,2], left: [15,14] },
    { pos: 2, right: [3,4], left: [1,0] },
    { pos: 4, right: [5,6,7,8,9,10,11,12], left: [3,2] },
    { pos: 12, right: [13,14], left: [11,10,9,8,7,6,5,4] },
    { pos: 14, right: [15,0], left: [13,12] },
  ];

And you need divided by 16

const animations = mov[direction].map(m => {
    const angle = (m * 2 * Math.PI) / 16; //<--see the "16"   
    ....
}

I forked the stackblitz here