Локальная навигация по индексному HTML-коду, содержащему карусель 3D-искусства. ⇐ Jquery

[Anonymous]

Каждый раз, когда я запускаю программу в реальном времени из Visual Code, она работает так, как задумано. У меня проблема заключается в локальном запуске кода при переходе из индексного файла в папке с файлами.
Я уверен, что проблема связана с индексным файлом, но я не могу найти проблема. Программа должна отображать 3D-карусель на html-странице с изображениями ниже.
Проблема заключается в том, что я запускаю индексный файл в папке компьютера, чтобы проверить, запускается ли он в папке компьютера. браузер. До этого я запускал код в реальном времени с помощью визуального кода, и программа работала, как и планировалось. Я предполагал, что это сработает, если я запущу индексный файл после импорта файлов на сервер. Несмотря на это, на html-странице отображается только одно увеличенное неподвижное изображение, выходящее за рамки пропорций.
Я не могу точно выделить то, что мне не удалось включить, несмотря на исследование этой проблемы по похожим публикациям. . Очевидно, мне чего-то не хватает на индексной странице.


< pre class="snippet-code-js lang-js Prettyprint-override">

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

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: #100000;
padding-top: 10%;
padding-bottom: 30%;
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: 12rem;
transition: 0.6s color;
position: relative;
margin-top: -18rem;
border-bottom: none;
line-height: 0;
}

div#carousel~span:hover {
color: #888;
cursor: pointer;
}

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

3D Art Carousel







[img]Seed of the Haze.jpg[/img]
[img]Daughter of the Haze.jpg[/img]
[img]Enchantress of the Haze.jpg[/img]
[img]Primeval Ruins.jpg[/img]
[img]Ruins.jpg[/img]
[img]Fish Creature.jpg[/img]
[img]Fish Creature.png[/img]
[img]Leviathan Hunter.jpg[/img]




<
>

текст

Подробнее здесь: https://stackoverflow.com/questions/787 ... t-carousel