Carousel Javascript Indicators-CodePudding

I have created a carousel from scratch but i have no idea how to link a circle pointer to a correct img of carousel.

This is the link of carousel GitHub Pages

I m learning js and i have no idea about solution

These SlideUp and SlideDown are the 2 function to change the img. Thanks in advance for the help.

function slideDown(){
  attiva  
  if (attiva > ((imgArray.length)-1)) {
   attiva=0
  }
  
  bigActive.classList.remove("block");
  minActive.classList.remove("active-colonna");
  bigActive=document.getElementById("img-"   attiva);
  minActive=document.getElementById("min-"   attiva);
  bigActive.classList.add("block");
  minActive.classList.add("active-colonna");
  pointerActive.classList.remove("pointer-active")
  pointerActive=document.getElementById("nr-"   attiva);
  pointerActive.classList.add("pointer-active")
 }

CodePudding user response：

Here is an example of what I mean with "helper method" from the comments. You only need changeImage() and then the helper method slideDown() just sends in a number in changeImage().

If clicking on the bullet points, they can send in a value based on their order, by calling changeImage directly.

function changeImage(attiva) {
  bigActive.classList.remove("block");
  minActive.classList.remove("active-colonna");
  bigActive=document.getElementById("img-"   attiva);
  minActive=document.getElementById("min-"   attiva);
  bigActive.classList.add("block");
  minActive.classList.add("active-colonna");
  pointerActive.classList.remove("pointer-active")
  pointerActive=document.getElementById("nr-"   attiva);
  pointerActive.classList.add("pointer-active")
}

function slideDown(){
  attiva  
  if (attiva > ((imgArray.length)-1)) {
   attiva=0
  }
  
  changeImage(attiva)
 }

[EDIT] Here below is a simple example of how you can connect your indicators ("circle pointers") to the changeImage() method.

document.querySelector('navbar').addEventListener('click', indicatorClicked)

function indicatorClicked(event) {
  let target = event.target
  if (event.target.type == 'radio') {
    console.log(target.dataset.order)  // attiva
    
    // changeImage(target.dataset.order)
  }
}

navbar > input[type="radio"] {
  cursor: pointer;
}

<navbar>
  <input type="radio" name="indicator" data-order="1" />
  <input type="radio" name="indicator" data-order="2" />
  <input type="radio" name="indicator" data-order="3" />
  <input type="radio" name="indicator" data-order="4" />
  <input type="radio" name="indicator" data-order="5" />
  <input type="radio" name="indicator" data-order="6" />
</navbar>