Q:

erro ao final do loop no slide show

Tenho o seguinte JS

window.onload = function() {
  var indexAtiva = 0;
  const lis = document.getElementsByClassName('slider').item(0).getElementsByTagName('li');

  function slider() {

    for (i = 0; i < lis.length; i++) {

      if (i != indexAtiva) {
        lis[i].classList.remove('ativa');
      } else {
        lis[i].className = 'ativa'
      }
    }

    if ((indexAtiva + 1) == lis.length) {
      indexAtiva = 0;
    } else {
      indexAtiva++;
    }

    setTimeout(slider, 3000);

  }

  slider();
  
  var slider = document.getElementsByClassName('slider')[0]
  var nav = slider.getElementsByTagName('nav')[0]
  var anterior = nav.getElementsByClassName('anterior')[0]
  var proximo = nav.getElementsByClassName('proximo')[0]
  
  anterior.onclick = function(){
   prev = indexAtiva - 1    
   prev = prev.length ? prev : lis[ lis.length - 1 ];  
   mostraBloco(prev);
  }
  
  proximo.onclick = function(){
   next = indexAtiva + 1    
      next = next.length ? next : lis[0];    
   mostraBloco(next);   
  }
// Função para exibir as imagens 
  function mostraBloco(next) {
   ativa = document.getElementsByClassName('ativa')
   ativa[0].classList.remove('ativa')  
   next.className = 'ativa'
  }

}
* {
 margin:0;
 padding:0;
 border:none;
 outline:0;
}

body {
 width:100vw;
}


ul {
 list-style: none;
}
  .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
  }
  @-webkit-keyframes fade {
  from {
 opacity: .4
 }
  to {
 opacity: 1
 }
  }
  @keyframes fade {
  from {
 opacity: .4
 }
  to {
 opacity: 1
 }
  }  
@keyframes slider {
    0% {
        transform: scale(1);        
    } 
    100% {
        transform: scale(1.1);     
    }
}  

div.slider {
 position:relative;
 width:100%;
 overflow:hidden; 
}
div.slider ul.slide {
}
div.slider ul.slide li{
 display:none;
}

.ativa{
 display:block !important; 
}

div.slider ul.slide li img {
    position:relative;
 width: 100%;
 animation: slider 1s linear;
 animation-fill-mode: forwards;
}
div.slider ul.slide li span {
    position:absolute;
 width: 100px;
 left: calc(50% - 50px);
 line-height:40px;
    bottom:0;
 text-align:center;
 color:rgb(255,255,255);
 z-index:2; 
}

  div.slider nav {
      position:absolute;
      width:100%;
      height:40px;
      bottom:0;
      background-color:rgba(0,0,0,.5);
      z-index:1;
  }
  div.slider nav button {
      position:absolute;
      width:150px;
      height:100%;
   cursor:pointer;
  }
  div.slider nav  button.anterior {
      left: 10%;
  }
  div.slider nav  button.proximo {
      right: 10%;
  }
<div class="slider">
  <ul class="slide">
     <li class="ativa">
        <img class="fade" src="_img/_banner/_site/bg_1.jpg" />
        <span>Este é 1</span>
     </li>
     <li>
        <img class="fade" src="_img/_banner/_site/bg_2.jpg" />
        <span>Este é 2</span>
     </li>
  </ul>
  <nav>
    <button class="anterior">Anterior</button>
    <button class="proximo">Próximo</button>
  </nav>
</div>

Meu objetivo é pegar uma UL com suas Lis e mostrar uma a uma. 
Mas não todas de uma vez.
O erro é o seguinte: o slide roda normalmente. Mas quando chega no final, ele trava e o console não mostra o erro.
Onde estará o erro?
Obs.: se eu retiro a parte que está abaixo de 
slider();

toda, então o slider roda normal. Ou seja, o problema deve estar nos botões de navegação
Segue o link online 
http://funerariasaopedro.net.br/novo/index5.php

A:

Um dos problemas está em que você criou um objeto com o mesmo nome da função:
function slider() { e var slider = document.getElementsByClassName('slider')[0]
Isso irá gerar conflito porque o objeto slider deixa de ser uma função neste ponto:
var slider = document.getElementsByClassName('slider')

A solução é ou mudar o nome da função ou da variável, e não os dois com o mesmo nome. Por exemplo:
var slider1 = document.getElementsByClassName('slider')[0]
var nav = slider1.getElementsByTagName('nav')[0]

Outra coisa redundante é o for, que não necessita desse if dentro dele.
Em relação aos botões, você pode aproveitar a função slider() dispensando funções extras, como fez. Basta você diferenciar o clique no botão Anterior, colocando um parâmetro true, para que a função saiba que ele foi clicado. No caso do botão Próximo não precisa, porque a função por padrão já passa os slides para frente.
Veja funcionando:

window.onload = function() {
   var indexAtiva = 0;
   const lis = document.getElementsByClassName('slider').item(0).getElementsByTagName('li');

   function slider(s) {

      for (i = 0; i < lis.length; i++) {
         lis[i].classList.remove('ativa');
      }

      // aqui irá tratar o clique no "Anterior".
      // É preciso tratar de 3 formas diferentes
      // dependendo do valor de indexAtiva.
      // Veja que o valor de indexAtiva, em cada caso,
      // irá receber o valor do índice ativado
      if(s){
         // significa que o próximo a mostrar será o
         // slide de índice 1, então está sendo exibido o 0.
         // neste caso eu ativo o último da array
         if(indexAtiva == 1){
            lis[lis.length-1].className = 'ativa';
            indexAtiva = lis.length-1;
            
         // aqui diz que está exibindo o último,
         // logo próximo será o primeiro (índice 0).
         // Então eu ativo o antepenúltimo da array
         }else if(indexAtiva == 0){
            lis[lis.length-2].className = 'ativa';
            indexAtiva = lis.length-2;
            
          // aqui é quando não for nenhum dos casos anteriores.
          // Eu diminuo 2 índices porque mais a frente será
          // incrementado com +1
         }else{
            lis[indexAtiva-2].className = 'ativa';
            indexAtiva -= 2;
         }
      }else{
         // aqui é quando for clicado o botão "próximo"
         // ou quando nenhum botão for clicado
         lis[indexAtiva].className = 'ativa';
      }

      indexAtiva = indexAtiva + 1 == lis.length ? 0 : indexAtiva+=1;

      tempo = setTimeout(slider, 3000);
   }

   slider();
   
   var slider1 = document.getElementsByClassName('slider')[0]
   var nav = slider1.getElementsByTagName('nav')[0]
   var anterior = nav.getElementsByClassName('anterior')[0]
   var proximo = nav.getElementsByClassName('proximo')[0]
   
   anterior.onclick = function(){
      clearTimeout(tempo);
      slider(true);
   }
   
   proximo.onclick = function(){
      clearTimeout(tempo);
      slider();
   }

}
* {
 margin:0;
 padding:0;
 border:none;
 outline:0;
}

body {
 width:100vw;
}


ul {
 list-style: none;
}
  .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
  }
  @-webkit-keyframes fade {
  from {
 opacity: .4
 }
  to {
 opacity: 1
 }
  }
  @keyframes fade {
  from {
 opacity: .4
 }
  to {
 opacity: 1
 }
  }  
@keyframes slider {
    0% {
        transform: scale(1);        
    } 
    100% {
        transform: scale(1.1);     
    }
}  

div.slider {
 position:relative;
 width:100%;
 overflow:hidden; 
}
div.slider ul.slide {
}
div.slider ul.slide li{
 display:none;
}

.ativa{
 display:block !important; 
}

div.slider ul.slide li img {
    position:relative;
 width: 100%;
 animation: slider 1s linear;
 animation-fill-mode: forwards;
  height: 180px;
}
div.slider ul.slide li span {
    position:absolute;
 width: 100px;
 left: calc(50% - 50px);
 line-height:40px;
    bottom:0;
 text-align:center;
 color:rgb(255,255,255);
 z-index:2; 
}

  div.slider nav {
      position:absolute;
      width:100%;
      height:40px;
      bottom:0;
      background-color:rgba(0,0,0,.5);
      z-index:1;
  }
  div.slider nav button {
      position:absolute;
      width:150px;
      height:100%;
   cursor:pointer;
  }
  div.slider nav  button.anterior {
      left: 10%;
  }
  div.slider nav  button.proximo {
      right: 10%;
  }
<div class="slider">
  <ul class="slide">
     <li class="ativa">
        <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
        <span>Este é 1</span>
     </li>
     <li>
        <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
        <span>Este é 2</span>
     </li>
     <li>
        <img class="fade" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />
        <span>Este é 3</span>
     </li>
     <li>
        <img class="fade" src="https://www.salford.ac.uk/__data/assets/image/0008/890072/varieties/lightbox.jpg" />
        <span>Este é 4</span>
     </li>
  </ul>
  <nav>
    <button class="anterior">Anterior</button>
    <button class="proximo">Próximo</button>
  </nav>
</div>

