Whenever I launch the program live from Visual Code, it works as intended. The issue I have is running the code locally when I navigate from the index file in the file folder.
I’m positive the issue is within the index file, but I can’t find the issue. The program is supposed to show a 3d art carousel in the html page with the images below.
The issue is when I launch the index file in the pc folder to see if it runs in the browser. Prior to this, I run the code live through Visual code and the program worked as planned. I assumed it would work if I launched through the index file after importing the files to a server. Despite this, the html page only displays a single still image blow-up beyond proportions.
I can’t quite single out what I’m failing to include despite researching the issue from similar postings. There’s obviously something I’m missing in the index page.
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;
}<!DOCTYPE html>
<html lang="en">
<header>
<meta charset="utf-8">
<title>3D Art Carousel</title>
<base href="images/Enchantress of the Haze.jpg">
<link rel="stylesheet" type="text/css" href="/style.css">
</header>
<body>
<div id="carousel">
<figure id="spinner">
<img src="Seed of the Haze.jpg" alt="Seed of the Haze">
<img src="Daughter of the Haze.jpg" alt="Daughter of the Haze">
<img src="Enchantress of the Haze.jpg" alt="Enchantress of the Haze">
<img src="Primeval Ruins.jpg" alt="Primeval Ruins">
<img src="Ruins.jpg" alt="Ruins">
<img src="Fish Creature.jpg" alt="Digital fish creature">
<img src="Fish Creature.png" alt="Digital fish creature 2">
<img src="Leviathan Hunter.jpg" alt="Leviathan Hunter">
</figure>
</div>
<script src="/main.js"></script>
</body>
<span style="float:left" class="ss-icon" onclick="galleryspin('-')"><</span>
<span style="float:right" class="ss-icon" onclick="galleryspin('')">></span>
</html>text
New contributor
user26357207 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2