Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mr. Whyte

Aparecer imagem inicial em SlideShow

Recommended Posts

Galera, eu peguei um codigo html que forma um SlideShow em um site! Mas este codigo n aparece a imagem inicial! Não aparece nenhuma imagem ate que você aperte no botão, e eu quero que ja apareça uma imagem inicial!

 

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8"/>
     <title>Document</title>
     <style type="text/css">
     * {box-sizing:border-box}
     
     /* Slideshow container */
     .slideshow-container {
     max-width: 1000px;
     position: relative;
     margin: auto;
     }
     
     .mySlides {
     display: none;
     }
     
     /* Next & previous buttons */
     .prev, .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     margin-top: -22px;
     padding: 16px;
     color: white;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     }
     
     /* 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: 13px;
     width: 13px;
     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}
     }
     </style>
     <script type="text/javascript">
     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>
</head>
<body>
   
   <div class="slideshow-container">
   <div class="mySlides fade">
   <div class="numbertext">1 / 3</div>
   <img src="img1.jpg" style="width:100%">
   <div class="text">Caption Text</div>
   </div>
   
   <div class="mySlides fade">
   <div class="numbertext">2 / 3</div>
   <img src="img2.jpg" style="width:100%">
   <div class="text">Caption Two</div>
   </div>
   
   <div class="mySlides fade">
   <div class="numbertext">3 / 3</div>
   <img src="img3.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>
   
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seu problema está aqui

Citar

 <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>

 

onde está declarado onclick declare onload (ao clicar / ao carregar)

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Descomplica Consultoria
      Oi Pessoal, preciso de ajuda com um portfolio academico
    • Por 4Unknow
      Bom dia comunidade Imasters.

      Venho aqui tratar de um problema dúvida que estou tendo com um layout que estou tentando usar o formulário php dele.
      Quando clico em enviar ele me enviar para um arquivo .php  (assets/vendor/simple-forms/sendmail.php)

      Ele não envia o e-mail, acredito que deveria aparecer uma mensagem que o contato foi enviado corretamente.
      Vou deixar os arquivos aqui em anexo quem puder me ajudar nessa, ficaria muito grato.
       
      Link Website (wetransfer.com)
    • Por Dcdbbvb
      Faça um código que deverá ter uma matriz de qualquer tamanho(Você define o tamanho) no qual o usuário irá digitar os números que serão armazenados na matriz. Construa uma função que deverá somar todos os números digitados. No final o programa mostrará a matriz e o valor total da somatória.
       
      por favorrrr alguém me ajuda
    • Por lotthaus
      Alguém poderia fazer essa atividade para eu ajudar um amigo ?

    • Por Sapinn
      Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz:
       
      CSS:
      * {   box-sizing:border-box;   font-family: Arial; } .slideshow-container {   max-width: 800px;     position: relative;   margin: auto; } .mySlides {   display: none; } .prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: #4285f4;   font-weight: bold;   font-size: 28px;   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(0,0,0,0.8); } .dot {   cursor: pointer;   height: 15px;   width: 15px;   margin: 10px 2px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;   transition: background-color 0.6s ease; } .active, .dot:hover {   background-color: #4285f4; } .fade {   -webkit-animation-name: fade;   -webkit-animation-duration: 1.5s;   animation-name: fade;   animation-duration: 1.5s; } .img_slide{     width: 100%;     height: 500px; } /* ----------------MODAL--------------------------------- */ .modal-container{     width: 100vw;     height: 100vh;     background: rgba(0, 0, 0, .8);     position: fixed;     top: 0px;     left: 0px;     z-index: 2000;     display: none;     justify-content: center;     align-items: center;     font-family: Arial, Helvetica, sans-serif; } .modal-container.mostrar{     display: flex; } @keyframes modal{     from{         opacity: 0;         transform: translate3d(0, -60px, 0);     }     to{         opacity: 1;         transform: translate3d(0, 0, 0);     } } .mostrar .modal-content{     animation: modal .3s; } .fechar{     position: absolute;     top: 8px;     right: 3px;     width: 30px;     height: 30px;     font-weight: bold;     color: #4285f4;     font-size: 25px;     font-family: Arial, Helvetica, sans-serif;     cursor: pointer;     background: transparent;     border: none; } @media (max-width: 600px) {     .img_slide{         width: 100%;         height: 300px; } }  
       
      JAVASCRIPT:
      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"; } function iniciaModal(modalID){     const modal = document.getElementById(modalID);     if(modal){         modal.classList.add('mostrar');          modal.addEventListener('click',(e)=>{         if(e.target.id == modalID || e.target.className == 'fechar'){             modal.classList.remove('mostrar');         }     });     }      } const botaoChama = document.querySelector('#botaoChama');  botaoChama.addEventListener('click',()=>{     iniciaModal('modal');      }); const botaoChama2 = document.querySelector('#botaoChama2');  botaoChama2.addEventListener('click',()=>{     iniciaModal('modal2'); });  
       
      HTML:
      <div id="modal" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide">            </div>        <div class="mySlides fade">             <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <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>   </div>    </div>  <div id="modal2" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp8480719.jpg"  class="img_slide">            </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp9683280.jpg"  class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(4)"></span>          <span class="dot" onclick="currentSlide(5)"></span>          <span class="dot" onclick="currentSlide(6)"></span>        </div>   </div>    </div> <button id="botaoChama">Modal</button> <button id="botaoChama2">Modal 2</button>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.