How can I get my JavaScript carousel to work?

Question

I can't get my carousel working. As far as I can tell the code is right, maybe you can see the problem? Here's the code...

<!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>

The html and css work, i cant get the pictures to cycle through or the number of cells to change. so none of the javascript is working for some reason. it keeps saying add more details even though i already have.

Answer 1

You've got an extra a in one of your event listeners

Change:

nextButton.aaddEventListener( 'click', function() {
  selectedIndex++;
  rotateCarousel();
});

to

nextButton.addEventListener( 'click', function() {
  selectedIndex++;
  rotateCarousel();
});

How can I get my JavaScript carousel to work?

Question

1 answers

solution1
0 2019-09-27 23:21:09

How can I get my JavaScript carousel to work?

Question

1 answers

solution1 0 2019-09-27 23:21:09

solution1
0 2019-09-27 23:21:09