Как сделать 3D-карусель адаптивной на мобильных устройствах ⇐ CSS

[Anonymous]

У меня возникла проблема с адаптивностью 3D-карусели на мобильных устройствах. Я попытался добавить класс img-fluid с помощью Bootstrap, но это испортило мое веб-представление.
Ниже приведен CSS-код в html.

Код: Выделить всё

var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle+"deg); -moz-transform:rotateY("+    angle +"deg); transform: rotateY("+ angle+"deg);");
}

Код: Выделить всё

div#carousel {
perspective: 1200px;
background: black;
padding-top: 10%;
font-size:0;
margin-bottom: 3rem;
overflow: hidden;
}
figure#spinner {
transform-style: preserve-3d;
height: 300px;
transform-origin: 50% 50% -500px;
transition: 1s;
}
figure#spinner img {
width: 40%; max-width: 425px;
position: absolute; left: 30%;
transform-origin: 50% 50% -500px;
outline:1px solid transparent;
}
figure#spinner img:nth-child(1) {
transform:rotateY(0deg);
}
figure#spinner img:nth-child(2) {
transform: rotateY(-45deg);
}
figure#spinner img:nth-child(3) {
transform: rotateY(-90deg);
}
figure#spinner img:nth-child(4) {
transform: rotateY(-135deg);
}
figure#spinner img:nth-child(5){
transform: rotateY(-180deg);
}
figure#spinner img:nth-child(6){
transform: rotateY(-225deg);
}
figure#spinner img:nth-child(7){
transform: rotateY(-270deg);
}
figure#spinner img:nth-child(8){
transform: rotateY(-315deg);
}
div#carousel ~ span {
color: #fff;
margin: 5%;
display: inline-block;
text-decoration: none;
font-size: 2rem;
transition: 0.6s color;
position: relative;
margin-top: -6rem;
border-bottom: none;
line-height: 0;
}
div#carousel ~ span:hover {
color: #888; cursor: pointer;
}

Код: Выделить всё

[img]https://picsum.photos/id/237/200/300[/img]
[img]https://picsum.photos/seed/picsum/200/300[/img]
[img]https://picsum.photos/200/300[/img]
[img]https://picsum.photos/id/237/200/300[/img]
[img]https://picsum.photos/seed/picsum/200/300[/img]
[img]https://picsum.photos/200/300[/img]
[img]https://picsum.photos/id/237/200/300[/img]
[img]https://picsum.photos/seed/picsum/200/300[/img]


<
>

Я прочитал в Интернете, что могу создать веб-сайт для просмотра на мобильных устройствах, добавив немного кода. . Это правда, могу ли я сделать его отзывчивым или мне нужен Bootstrap?

Подробнее здесь: https://stackoverflow.com/questions/786 ... -on-mobile