Show which slide number is active

I'm making a nail slider that needs to be shown a numbering containing the number of current sliders and which slide number is active

<div class="slider-wrapper">


  <ul class="slider">

  <li class='slider-item'><img src="assets/img/phone-slider-1.png" alt="">
  <div class="slide-text-wrap">
      <h3>TÍTULO 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</li>
  <li class='slider-item'><img src="assets/img/phone-slider-1.png" alt="">
    <div class="slide-text-wrap">
      <h3>TÍTULO 2</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
    </div>
   </li>
  <li class='slider-item'><img src="assets/img/phone-slider-1.png" alt="">
    <div class="slide-text-wrap">
      <h3>TÍTULO 3</h3><p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris Ut enim ad minim veniam, quis nostrud exercitation ullamc</p>
    </div>
  </li>
</ul>
    <div class="setas-slider">
      <label for="" class="slide-number-left">0</label><label for="">/4</label></br>
      <span class="prev-slider" onclick="previuosframe()"><</span>
      <span class="next-slider" onclick="nextframe()">></span>
    </div>
  </div>

in java script ta so

function slider(){
  var current = $('.slider li.active');

if(current.length==0){
  $('.slider li:first-child').addClass('active');
  }else{
    var nextframe = current.removeClass('active').next();
    if(nextframe.length==0){
      $('.slider li:first-child').addClass('active');
  }else{
  var retornoframe = nextframe.addClass('active');
  (function(){
    retornoframe.fadeIn();
  });
  }
 }
}

slider();
var intervalo = setInterval(slider, 3000);


var clickslider = $('.slide-number-left');
var contadorslider = $('.slider li.active');
var sliderchild = $('.slider li');

function nextframe(){
slider();
}

/*
clickslider.on("click", function(){

  alert("dddd");
});
*/


//////////////

function previous(){
var current = $('.slider li.active');

if(current.length==0){
  $('.slider li:first-child').addClass('active');
  }else{
    var prev = current.removeClass('active').prev();
    if(prev.length==0){
      $('.slider li:first-child').addClass('active');

  }else{
    (function(){
      prev.addClass('active').fadeIn();
    });
  }
 }
}

function previuosframe(){
  var current = $('.slider li.active');
  var prev = current.removeClass('active').prev();
  prev.addClass('active');
}

Any idea how I can create the show?