HTML Promoções mudando com o um certo tempo

[Matheus Evandro Rech]

Bom eu vejo muito em sites(principalmente de lojas) aquelas imagens que ficam passando na tela com promoções eu dei uma procurada na web pra ver se achava algo mais só encontrei em inglês e a tradução do Google me deixou muito confuso, se alguem saber como é que faz ou se tiver alguma documentação pra dar uma olhada agradeço

Ex:

[Leonardo0308]

Bom dia @Matheus Evandro Rech

 

Dá uma olhada nesse LINK, ele explica de forma bem detalhada como funciona um carrossel. 

[Matheus Evandro Rech]

eu dei uma olhada e fiz la dai deu um erro e eu dei uma olhada de novo e foi so que as minhas imagens ficam brancas sabe o porque ?

adicionado 5 minutos depois

@Leonardo0308 no tutorial ele fez com css e js interno eu importei porque não quero um codigo muito grande no arquivo .html, tem algum problema ?

[Leonardo0308]

O caminho e o nome das imagens, estão certos?

[Matheus Evandro Rech]

sim, as imagens estavam aparecendo mais uma ao lado da outra, eu tinha me esquecido de importar o arquivo js depois que importei não aparece a imagem 

[Leonardo0308]

Você já fez todos os passos do tutorial?

 

 

[Matheus Evandro Rech]

@Leonardo0308 sim

adicionado 3 minutos depois

@Leonardo0308 o problema esta no css só não achei ainda porque se eu o removo as imagens aparecem vou verificar o aquivo de novo

 

[Leonardo0308]

No HTML na primeira imagem, está com a class "ativo" provavelmente ao lado do "trs"?

[Matheus Evandro Rech]

@Leonardo0308 esta assim:

<div id="slider">
          <a href="#" class="trs"><img src="../imagens/bannerpginicial.jpg" alt="banner" /></a>
          <a href="#" class="trs"><img src="../imagens/produtos/propaganda11.png" alt="propaganda" /></a>
        </div>

 

[Leonardo0308]

Tenta por isso no lugar 

 

<div id="slider">
          <a href="#" class="trs ativo"><img src="../imagens/bannerpginicial.jpg" alt="banner" /></a>
          <a href="#" class="trs"><img src="../imagens/produtos/propaganda11.png" alt="propaganda" /></a>
        </div>

 

[Matheus Evandro Rech]

@Leonardo0308 so o ativo do lado do trs ? porque se for só isso não funcionou 

ja ta me dando uma dor de cabeça isso kkk

[Leonardo0308]

Bem...se quiser outro, tem o desse LINK

[Matheus Evandro Rech]

cara pode rir era so colocar o js interno sei la o por causa que se for externo ele não identifica quanda a janela abre então ficou assim pra quem tem duvida:

HTML:

<div class="slideshow-container">

        <div class="mySlides fade">
         <div class="numbertext">1 / 3</div>
          <img src="../imagens/bannerpginicial.jpg" style="width:100%">
          <div class="text">Caption Text</div>
         </div>

        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="../imagens/bannerpginicial.jpg" style="width:100%">
          <div class="text">Caption Two</div>
        </div>

        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="../imagens/bannerpginicial.jpg" style="width:100%">
          <div class="text">Caption Three</div>
        </div>

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

      </div>
        <br>

      <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span> 
        <span class="dot" onclick="currentSlide(2)"></span> 
        <span class="dot" onclick="currentSlide(3)"></span> 
      </div>

JS:

<script>
      var slideIndex = 1;
      showSlides(slideIndex);

      function plusSlides(n) {
        showSlides(slideIndex += n);
      }

      function currentSlide(n) {
        showSlides(slideIndex = n);
      }

      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";  
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
      }
    </script>

CSS:

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

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

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

Eu não sei explicar muito como funciona porque o site não explicou só deu o código

 

Eu fiz o mesmo do primeiro site mais continuou o erro de não aparecer a imagem

[Leonardo0308]

5 minutos atrás, Matheus Evandro Rech disse:

o site não explicou só deu o código

 

Está comentado no código o que faz cada bloco. Mas se você quer saber o que faz cada função especifica, no próprio w3schools você consegue achar os detalhes.