Как сделать карусель вертикальной с тремя картами? ⇐ Javascript

[Anonymous]

Я использую React-material-ui-carousel и показываю листинг вертикально, как
.
Следующий код: < /p>
import Carousel from "react-material-ui-carousel";
const chunk = (arr, size) =>
Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
arr.slice(i * size, i * size + size)
);
const dummyData = [
{
displayName: "Trupti",
isMuted: true,
isSpeaking: false,
userId: 1,
},
{
displayName: "AAA",
isMuted: true,
isSpeaking: false,
userId: 2,
},
{
displayName: "BBB",
isMuted: true,
isSpeaking: false,
userId: 3,
},
{
displayName: "CCC",
isMuted: true,
isSpeaking: false,
userId: 4,
},
{
displayName: "DDD",
isMuted: true,
isSpeaking: false,
userId: 5,
},
{
displayName: "EEE",
isMuted: true,
isSpeaking: false,
userId: 6,
},
{
displayName: "FFF",
isMuted: true,
isSpeaking: false,
userId: 7,
},
{
displayName: "GGG",
isMuted: true,
isSpeaking: false,
userId: 8,
},
{
displayName: "HHH",
isMuted: true,
isSpeaking: false,
userId: 9,
},
{
displayName: "JJJ",
isMuted: true,
isSpeaking: false,
userId: 10,
},
{
displayName: "KKK",
isMuted: true,
isSpeaking: false,
userId: 77,
},
{
displayName: "LLL",
isMuted: true,
isSpeaking: false,
userId: 12,
},
{
displayName: "MMM",
isMuted: true,
isSpeaking: false,
userId: 13,
},
{
displayName: "NNN",
isMuted: true,
isSpeaking: false,
userId: 14,
},
];
const groupArray = chunk(dummyData, displayCard);
{
return (
onClick(e)} style={style}>
{next && }
{prev && }

);
}}
>
{groupArray.length > 0 &&
groupArray.map((e, index) => {
return (

{e.map((e) => {
return (
key={e.displayName}
name={e.displayName}
isMuted={e.isMuted}
isSpeaking={e.isSpeaking}
acsUserId={e.userId}
setError={setError}
/>
);
})}

);
})}
;

< /code>
На сенсорном экране он движется сверху вниз, но не может прокручивать от вниз. Я попытался решить это, используя CSS, например, перемещение Prev и Next вверху и снизу, но это не работает. Пожалуйста, помогите мне здесь, чтобы найти то, что я делаю не так.


Подробнее здесь: https://stackoverflow.com/questions/794 ... hree-cards