W3C error a tag Name - "The name attribute on the img element is obsolete. Use the id attribute Instead."

Question

Hello! I have a banner where it pulls images and functions through Javascript, but when I pass the page in Validator appears the message "The name attribute on the img element is obsolete. Use the id attribute Instead". I try to change name to id, but the banner stops working.

How could I do it? There are ways to use getElementByID inside the img tag?

var Image_slide = new Array("http://www.esquadros.com.br/image/home/_perfiladeira_de_perfis_estruturais_esquadros.jpg", "http://www.esquadros.com.br/image/home/_perfiladeira_de_telhas_metalicas_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_slitter_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_e_transversal_combinado_esquadros.jpg", "http://www.esquadros.com.br/image/home/_linha_de_producao_esquadros.jpg", "http://www.esquadros.com.br/image/home/_software_profil_esquadros.jpg"); // image container
var Img_Length = Image_slide.length; // container length - 1
var Img_current = 0

function slide() {
  if (Img_current >= Img_Length) {
    Img_current = 0;
  }
  document.slide.src = Image_slide[Img_current];
  Img_current++;
}

function auto() {
  setInterval(slide, 3000);
}
window.onload = auto;
document.slide.src = Image_slide[0];

var i = -1;

function nextImg() {
  document.slide.src = Image_slide[(++i) % Image_slide.length];
  if (i >= Image_slide.length) return true;
}

function prevImg() {
  document.slide.src = Image_slide[(i = i <= 0 ? 0 : i - 1) % 3];
}

.banner-topo {
  list-style: none;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  -webkit-transition: width 2s linear, height 2s linear;
  -moz-transition: width 2s linear, height 2s linear;
  -o-transition: width 2s linear, height 2s linear;
  transition: width 2s linear, height 2s linear;
}

.banner-topo img {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
  border-bottom: 4px solid #ffdb00;
}

.banner-topo img,
.slider-active {
  opacity: 1;
}

.cursor {
  color: #fff;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(2, 6, 36, 0.8);
}

<div class="banner-topo">
  <img src="/" name="slide" alt="Banners Principais">
</div>
<div class="cursor">
  <a class="prev" onClick="prevImg()">&#10094;</a>
  <a class="next" onClick="nextImg()">&#10095;</a>
</div>

Answer 1

I made the change in your code for your slide to work using getElementById, created the variable slideElement that captures the tag img for the id and I also swapped the name for the id in the tag, and replaces everything that was document.slide with the variable slideElement.

var slideElement = document.getElementById("slide");

var Image_slide = new Array("http://www.esquadros.com.br/image/home/_perfiladeira_de_perfis_estruturais_esquadros.jpg", "http://www.esquadros.com.br/image/home/_perfiladeira_de_telhas_metalicas_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_slitter_esquadros.jpg", "http://www.esquadros.com.br/image/home/_maquina_de_corte_longitudinal_e_transversal_combinado_esquadros.jpg", "http://www.esquadros.com.br/image/home/_linha_de_producao_esquadros.jpg", "http://www.esquadros.com.br/image/home/_software_profil_esquadros.jpg"); // image container
var Img_Length = Image_slide.length; // container length - 1
var Img_current = 0

function slide() {
  if (Img_current >= Img_Length) {
    Img_current = 0;
  }
  slideElement.src = Image_slide[Img_current];
  Img_current++;
}

function auto() {
  setInterval(slide, 3000);
}
window.onload = auto;
slideElement.src = Image_slide[0];

var i = -1;

function nextImg() {
  slideElement.src = Image_slide[(++i) % Image_slide.length];
  if (i >= Image_slide.length) return true;
}

function prevImg() {
  slideElement.src = Image_slide[(i = i <= 0 ? 0 : i - 1) % 3];
}

.banner-topo {
  list-style: none;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  -webkit-transition: width 2s linear, height 2s linear;
  -moz-transition: width 2s linear, height 2s linear;
  -o-transition: width 2s linear, height 2s linear;
  transition: width 2s linear, height 2s linear;
}

.banner-topo img {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
  border-bottom: 4px solid #ffdb00;
}

.banner-topo img,
.slider-active {
  opacity: 1;
}

.cursor {
  color: #fff;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(2, 6, 36, 0.8);
}

<div class="banner-topo">
  <img src="/" id="slide" alt="Banners Principais">
</div>
<div class="cursor">
  <a class="prev" onClick="prevImg()">&#10094;</a>
  <a class="next" onClick="nextImg()">&#10095;</a>
</div>