const btnActiveFirst = document.getElementById("slide_dato__btn0");
  btnActiveFirst.classList.add("btn-active");
  const swiperDatos = new Swiper('.swiper_datos', {
          autoHeight: true,
          simulateTouch: false,
    });
        document
    .querySelector('.slide-0')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(0, 0);
    });
      document
    .querySelector('.slide-1')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(1, 0);
    });
      document
    .querySelector('.slide-2')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(2, 0);
    });
      document
    .querySelector('.slide-3')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(3, 0);
    });
      document
    .querySelector('.slide-4')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(4, 0);
    });
      document
    .querySelector('.slide-5')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(5, 0);
    });
      document
    .querySelector('.slide-6')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(6, 0);
    });
      document
    .querySelector('.slide-7')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(7, 0);
    });
      document
    .querySelector('.slide-8')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(8, 0);
    });
      document
    .querySelector('.slide-9')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(9, 0);
    });
      document
    .querySelector('.slide-10')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(10, 0);
    });
      document
    .querySelector('.slide-11')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(11, 0);
    });
      document
    .querySelector('.slide-12')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(12, 0);
    });
      document
    .querySelector('.slide-13')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(13, 0);
    });
      document
    .querySelector('.slide-14')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(14, 0);
    });
      document
    .querySelector('.slide-15')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(15, 0);
    });
      document
    .querySelector('.slide-16')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(16, 0);
    });
      document
    .querySelector('.slide-17')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(17, 0);
    });
      document
    .querySelector('.slide-18')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(18, 0);
    });
      document
    .querySelector('.slide-19')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(19, 0);
    });
      document
    .querySelector('.slide-20')
    .addEventListener('click', function (e) {
      e.preventDefault();
      var elements = document.getElementsByClassName('btn-active');
        for(element of elements){
          element.classList.remove('btn-active');
        }
      var targetElement = e.target || e.srcElement;
      targetElement.classList.add("btn-active");
      
      swiperDatos.slideTo(20, 0);
    });