Я не могу заставить мою карусель работать.Насколько я могу судить, код правильный, может быть, вы видите проблему?Вот код ...
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Randy's Webpage</title>
<link rel="stylesheet" type="text/css" href="Ani.css">
</head>
<body>
<div class= "scene">
<div class= "carousel">
<div class= "cell">1</div>
<div class= "cell">2</div>
<div class= "cell">3</div>
<div class= "cell">4</div>
<div class= "cell">5</div>
<div class= "cell">6</div>
<div class= "cell">7</div>
<div class= "cell">8</div>
<div class= "cell">9</div>
<div class= "cell">10</div>
<div class= "cell">11</div>
<div class= "cell">12</div>
<div class= "cell">13</div>
<div class= "cell">14</div>
<div class= "cell">15</div>
</div>
</div>
<div class= "carousel-options">
<p>
<label>
Cells
<input class= "cells-range" type= "range" min= "3" max= "15" value= "9" />
</label>
</p>
<p>
<button class= "previous-button">Previous</button>
<button class= "next-button">Next</button>
</p>
<p class= "pee">Orientation: </p>
<label>
<input type= "radio" name= "orientation" value= "horizontal" checked />
Horizontal
</label>
<label>
<input type= "radio" name= "orientation" value= "vertical" />
Vertical
</label>
</p>
</div>
</body>
</html>
<script>
var nextButton = document.querySelector(".next-button");
nextButton.aaddEventListener("click", function() {
selectedIndex++;
rotateCarousel();
});
var cellsRange = document.querySelector(".cells-range");
cellsRange.addEventListener("change", changeCarousel);
cellsRange.addEventListener("input", changeCarousel);
function changeCarousel() {
cellCount = cellsRange.value;
theta = 360 / cellCount;
var cellSize = isHorizontal ? cellWidth : cellHeight;
radius = Math.round(cellSize / 2 / Math.tan(Math.PI / cellCount));
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
if (i < cellCount) {
//visible cell
cell.style.opacity = 1;
var cellAngle = thetaa * i;
cell.style.transform =
rotateFn + ")" + cellAngle + "deg) translateZ(" + radius + "px)";
} else {
// hidden cell
cell.style.opacity = 0;
cell.style.transform = "none";
}
}
rotateCarousel();
}
var orientationRadios = document.querySelectorAll('input[name="orientation"]');
(function() {
for (var i = 0; i < orientationRadios.length; i++) {
var radio = orientationRadios[i];
radio.addEventListener("change", onOrientationChange);
}
})();
function onOrientationChange() {
var checkedRadio = document.querySelector(
'input[name="orientation"]:checked'
);
isHorizontal = checkedRadio.value == "horizontal";
rotateFn = isHorizontal ? "rotateY" : "rotateX";
changeCarousel();
}
//set initials
onOrientationChange();
</script>
</body>
</html>
HTML и CSS работают, я не могу заставить изображения циклически проходить или количество ячеек, чтобы измениться.так что ни один из javascript по какой-то причине не работает.это продолжает говорить, добавляют больше деталей, даже если у меня уже есть.