carousel cards in Javascript css html

This is a reference image of what I'm trying to do

I have tried to make a carousel with cards, but I have not been able to make the indicator of the buttons and the card advance when pressing the buttons, as shown in the image. Could you give me a hand to know how to make the indicator and the card advance as it is clicked?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let targeta = document.querySelectorAll('.card');
let puntos = document.querySelectorAll('.secciones .punto');

for (i = 0; i < targeta.length; i++) {
  puntos[i].addEventListener('click', function(evento) {
    for (i = 0; i < puntos.length; i++) {
      puntos[i].classList.remove('activo');
    }
    clase_activo(evento);
  });

  targeta[i].addEventListener('click', function(evento) {
    for (i = 0; i < puntos.length; i++) {
      targeta[i].classList.remove('activo');
    }
    clase_activo(evento);
  });
}

function clase_activo(evento) {
  if (evento.target.classList.contains('activo')) {
    evento.target.classList.remove('activo');
  } else {
    evento.target.classList.add('activo');
  }
}

<!-- language: lang-css -->

.product-list {
  background: #dfe6e9;
  padding: 3em;
}

.product-list .card {
  background: white;
  border-radius: 10px;
  padding: 1em;
  box-shadow: 0px 10px 5px #b2bec3;
  text-align: center;
  font-family: 'SpaceGrotesk-medium';
}

.card {
  height: 300px;
}

.product-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 40px;
}

.secciones {
  display: flex;
  align-items: center;
  /*      background: #fb6969;*/
  justify-content: center;
}

.punto {
  background: #b4f028;
  /* #fb9769; */
  height: 10px;
  width: 30px;
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 2px;
}

.punto.activo {
  background: #f07e28;
  /* #fb9769; */
}

.card.activo {
  background: #f07e28;
}

<!-- language: lang-html -->

<section class="product-list">
  <h1>productos</h1>
  <div class="product-container">

    <div class="card 1 activo">
    </div>

    <div class="card 2 ">
    </div>

    <div class="card 3 ">
    </div>

    <div class="card 4 ">
    </div>

  </div>
  <div class="secciones">
    <div class="punto  activo"></div>
    <div class="punto "></div>
    <div class="punto "></div>
    <div class="punto "></div>
  </div>
</section>

<!-- end snippet -->

I used a loop to attach click events to both the cards and the dots. When either a card or a dot is clicked, the active class is removed from all cards and dots, and then added to the clicked item and its corresponding item.

// select all cards and dots
let cards = document.querySelectorAll('.card');
let dots = document.querySelectorAll('.secciones .punto');

// loop through each card and dot
for (let i = 0; i < cards.length; i++) {
    // attach click event to each card
    cards[i].addEventListener('click', function() {
        for (let j = 0; j < cards.length; j++) {
            // remove the active class from all cards
            cards[j].classList.remove('activo');
            dots[j].classList.remove('activo');
        }
        // add the active class to the clicked card
        this.classList.add('activo');
        dots[i].classList.add('activo');
    });

    // attach click event to each dot
    dots[i].addEventListener('click', function() {
        for (let j = 0; j < cards.length; j++) {
            // remove the active class from all cards
            cards[j].classList.remove('activo');
            dots[j].classList.remove('activo');
        }
        // add the active class to the corresponding card
        cards[i].classList.add('activo');
        this.classList.add('activo');
    });
}