Slide show errors

Question

Some doubts:

1 ) If we reduce the height of browser amending the resolution, the div.slider does not follow the height of div.slide. That is, it remains at the same height. Therefore, the image becomes small, the div.slider high and the controls next and previous down there.

2 ) A SPAN that is the descriptions of images this above the NAV that houses the navigation buttons. The problem here is that I can’t navigate because of that. And, if I put the SPAN with a small size and throw it forward then I can navigate, but I can’t centralize the SPAN.

3 ) There is still one last doubt. But this is at the same level of teaching. In the code below is:

.slide {
    position: absolute;
    display: none;
    width: 100%;
    height:100%;
}

But if I put div.slide instead of .slide, although it is a div, the slide some and page loads blank. What is happening at this event?

Can someone please help me?

Code below:

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

	function startslider(dir) {
	  ativa = $("div.slider div.ativa")
	  ativa.removeClass("ativa");
	  if(dir == -1) 
		$('div.slider').prepend($('div.slider div.slide').last());
	  else 
		$('div.slider nav').before(ativa);
	  
	  $('div.slider div.slide').eq(0).addClass('ativa');
	  timer = setTimeout(startslider, 2000);
	}
	
	$('div.slider nav button.proximo').on('click', function() {
		clearTimeout(timer);
		startslider(1);
	});
	
	$('div.slider nav button.anterior').on('click', function() {
		clearTimeout(timer);
		startslider(-1);
	});
	
	var timer = setTimeout(startslider, 2000);
    
   });

* {
	margin: 0;
	padding: 0;
}
.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
  }
}

div.slider {
	position: relative;
	width: 100vw;
	height:360px;
	overflow: hidden;
}
.slide {
	position: absolute;
	display: none;
	width: 100%;
	height:100%;
}
.ativa {
	display: block;
}
.ativa img {
	width:100%;
	height:auto;
	animation: slider 1s linear;
	animation-fill-mode: forwards;
}
@keyframes slider {
   0% {
   transform: scale(1);
  }
   100% {
   transform: scale(1.1);
  }
}
.ativa img:hover {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
div.slider div.slide span {
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: rgb(255,255,255);
	z-index: 500;
}
div.slider nav {
	position: absolute;
	width: 100%;
	height: 40px;
	bottom: 0;
	text-align: center;
	background-color: rgb(0, 0, 0, .5);
	z-index: 400;
}
div.slider nav button.anterior, div.slider nav button.proximo {
	position: absolute;
	width: 100px;
	height: 40px;
	text-align: center;
}
div.slider nav button.anterior {
	left: 10%;
}
div.slider nav button.proximo {
	right: 10%;
}
div.slider nav button.proximo label {
	top: calc(50%-20px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
   <div class="slide ativa">
     <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
     <span>Este é 1</span>
   </div>
   <div class="slide">
     <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
     <span>Este é 2</span>
   </div>
   <div class="slide">
     <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_3.jpg" />
     <span>Este é 3</span>
   </div>
   <nav>
     <button class="anterior">Anterior</button>
     <button class="proximo">Próximo</button>
   </nav>
  </div>

Answer 1

We go by part and at the end put an example of the modification.

1 ) If we reduce the height browser by changing the resolution, the div.slider does not follow the height of div.slide

I made some modifications to the CSS and explain why the div does not follow the height.

2 ) A span the descriptions of the images are above the Nav which houses the navigation buttons.

The problem here is that you are setting the width as 100%. How are you working with position:absolute, it ends up overlapping the others. You could correct with width: calc(100% - 200px); and then correct the margin.

In the example I did different. I decided to use float.

3 ) If I put div.slide instead of .slide, although it is a div, the slide some and page loads blank.

How CSS works in cascade mode (Cascade Style Sheet), he will interpret div.slide as being a "higher" element, ignoring the class .ativa (which does not specify the element that will change - will serve for all), responsible for changing the display. For it to work, it is necessary to do as follows:

div.slide {
    position: absolute;
    display: none;
    width: 100%;
    height:100%;
}
div.ativa {
    display: block
}

Following example commented:

$(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>
<div class="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>