Jump to content
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>

 

Share this post


Link to post
Share on other 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)

 

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By FelipeCostaFT
      Estou iniciando uma startup para ajudar os devs a entrarem no mercado de trabalho mais preparados
      e, por isso, com maior chance de arrumar um bom emprego.

      Mas gostaria de saber como está sendo a realidade de vocês nesse momento de encarar o mercado.
      Alguém já está nessa fase ou até dentro do mercado poderia me ajudar? Esse forms dura 1 minuto pra
      responder e vai nos auxiliar a descobrir como ajudá-los a chegar lá mais rápido.
       
      link do forms
    • By MikeDaUmbrella
      Olá, boa noite.
      Alguém aqui pode me ajudar em fazer uma function ou um codigo simples para gerar e checar senhas usando o bcrypt.
      Agradeço.
      Um código para GERAR onde o resultado sai para uma varável (assim posso fazer para salvar no banco de dados)
      Um código para pegar via POST a senha e checar se é igual a senha salva do bcrypt.
    • By mtwzim
      Olá pessoal, recentemente eu venho desenvolvendo um app para pagamentos/cartões pré-pago, e estou procurando alguma empresa/api que forneça um serviço apara emissão de cartões pré-pagos (e que seja possível customizar os cartões: por a minha própria logo, etc), alguém pode me informar alguma empresa que faz isso aqui no brasil? Já encontrei soluções como stripe mas eles não oferecem esse serviço para o brasil?
    • By Rzorr
      Bom dia,
              eu tenho um  site de imóveis, sou corretor, ele está com alguns problemas na URL, comprei esse script e venho fazendo algumas alterações nele, sei o básico, cadastrar, deletar, buscar, update, mas o que acontece esse site foi construido com MVC e confesso parei de estudar PHP faz muito tempo, e não entendo nada de MVC, abaixo o código da busca e como forma o link é montado.
          No site o link fica assim: /imoveis/lista/referencia/referencia/categoria/comprar/tipo/tipo/cidade/Camboriú/bairro/bairro#busca nesse exemplo fiz uma busca pela cidade!
         Se clico no menu em vendas o link fica assim: /imoveis/lista/referencia/referencia/categoria/comprar/tipo/tipo/cidade/cidade/bairro/bairro#busca
      pessoal obrigado pela disposição em ajudar, eu to tentando resolver faz dias, mas não consigo entender a a forma como é construido.
       
      <?php class busca extends controller { public function init(){ } public function inicial(){ $referencia = $this->post('referencia'); $categoria = $this->post('categoria'); $tipo = $this->post('tipo'); $cidade = $this->post('cidade'); $bairro = $this->post('bairro'); if($referencia){ $cidade = "cidade"; $bairro = "bairro"; $tipo = "tipo"; $categoria = "categoria"; } else { $referencia = 'referencia'; if(!$categoria){ $categoria = "categoria"; } if(!$tipo){ $tipo = "tipo"; } if(!$cidade){ $cidade = "cidade"; } if(!$bairro){ $bairro = "bairro"; } } $endereco = DOMINIO."imoveis/lista/referencia/$referencia/categoria/$categoria/tipo/$tipo/cidade/$cidade/bairro/$bairro#busca"; $this->irpara("$endereco"); }  
    • By silver sanths
      #include <stdio.h> int main() { float valor_produto = 0, valor_pagamento = 0; int troco = 0; troco = valor_pagamento - valor_produto; scanf("%f", &valor_produto); scanf("%f", &valor_pagamento); if (valor_produto < valor_pagamento) { printf("100: %d", troco / 100); printf("\n50: %d", troco % 100 / 50); printf("\n2: %d", troco % 50 / 20); printf("\n10: %d", troco % 20 / 10); printf("\n5: %d", troco % 10 / 5); printf("\n2: %d", troco % 5 / 2); printf("\n1: %d", troco % 2 / 1); } return 1;
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.