Errors in slide show

$(document).ready(function(e) {

    function startslider(dir) {
        /* Captura a imagem ativa e define a imagem atual */
        let ativa   = $("div.slider figure.ativa")
        let current = null;

        /* Verifica se a direção é esquerda (-1) ou direita (qualquer outro valor) */
        if (dir == -1) {
            current = $(ativa).prev();
        } else {
            current = $(ativa).next();
        }

        /**
         * Verifica se há alguma imagem ativa
         * ou se chegou no final do slide, caso
         * a condição seja verdadeira, captura
         * a primeira imagem do slide.
         */
        if (current.length == 0) {
            current = $("div.slider figure").first()
        }

        /**
         * Remove a adicione a classe "ativa"
         * no elemento ativo e atual, respectivamente.
         */
        $(ativa).removeClass("ativa");
        $(current).addClass('ativa');

        /* Captura o atributo "ALT" e adicione acomo legenda */
        $(".slider-controls .caption").text($(current).find("img").attr("alt"))

        /* Programa um novo slide */
        timer = setTimeout(startslider, 4000);
    }

    $('.slider-controls button.proximo').on('click', function() {
        clearTimeout(timer);
        startslider(1);
    });

    $('.slider-controls button.anterior').on('click', function() {
        clearTimeout(timer);
        startslider(-1);
    });

    let timer = setTimeout(startslider, 0);

});

/* Reseta os atributos abaixo */
* {
  margin: 0;
  padding: 0;
}

div.slider {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

/**
 * Adiciona "position" como "relative" para
 * não "perder" o tamanho da imagem.
 * O "absolute" não "consegue" modificar o tamanho
 * do elemento pai.
 */
.slide {
  display: none;
  position: relative;
  width: 100%;
}

/**
 * Adiciona o efeito na div, ao invés da imagem
 */
.ativa {
  animation: slider 1s linear;
  animation-fill-mode: forwards;
  display: block;
}

.ativa img {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
  max-width: 100%;
}

/**
 * Como removi o "nav" do elemento #slider
 * Precisei adicionar as modificações abaixo.
 * Como o tamanho é fixo, não terá problema em 
 * trabalhar com o "bottom" fixo também.
 */
.slider-controls {
  background-color: rgba(0, 0, 0, .5);
  bottom: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  width: 100%;
}

/**
 * Nos botões de controle, não há necessidade
 * de trabalhar com "position:absolute", basta
 * utilizar "float" para posicioná-los.
 */
.slider-controls button.anterior,
.slider-controls button.proximo {
  height: 40px;
  width: 100px;
}

.slider-controls button.anterior {
  float: left;
}

.slider-controls button.proximo {
  float: right;
}

.slider-controls span.caption {
  color: white;
  display: block;
  float: left;
  line-height: 40px;
  text-align: center;
  width: calc(100% - 200px);
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to   {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to   {opacity: 1}
}

@keyframes slider {
  from {transform: scale(1)}
  to   {transform: scale(1.1)}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="slider">
  <figure class="slide">
    <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg"alt="Imagem 1" />
  </figure>

  <figure class="slide">
    <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg"alt="Imagem 2" />
  </figure>

  <figure class="slide">
    <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_3.jpg"alt="Imagem 3" />
  </figure>
</div>

<nav class="slider-controls">
  <button class="anterior">Anterior</button>
  <span class="caption"></span>
  <button class="proximo">Próximo</button>
</nav>