Ir para conteúdo

Arquivado

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

Mr. Whyte

Imagem inicial em slideshow

Recommended Posts

Bom, tenho um codigo de slide que não aparece uma imagem principal, só aparece os botões de prev e next, após clicar em qualquer botão, aparece as imagens, mas eu quero que aparece uma imagem inicial sem precisar clicar em nenhum dos botões ! Se alguem souber, eu agradeço.

 

 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";
     }

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • 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>
    • Por Alan Arnese
      Bom dia pessoal
       
      Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.

      Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
       
      Segue abaixo os códigos
      Index.html
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>  style.css
       
      *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; } Basicamente quero como o link abaixo mas vinculando meus controles de navegação
       
      Exemplo
    • Por Alan Arnese
      Bom dia pessoal
       
      Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.

      Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
       
      Segue abaixo os códigos
      Index.html
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>  style.css
       
      *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; } Basicamente quero como o link abaixo mas vinculando meus controles de navegação
       
      Exemplo
    • Por ZuptInformática
      Prezados amigos, boa tarde!
       
      Estou com um erro que não estou conseguindo resolver, no slide show do site, o primeiro slide não passa automaticamente, só seu clico com o mouse, depois disso ele continua automaticamente:
       
      Este é o código jquery:
       
      jQuery(document).ready(function () { $(".bullet").click(); jQuery('.tp-banner').show().revolution( { dottedOverlay: "none", delay: 10000, startwidth: 1140, startheight: 560, hideThumbs: 200, thumbWidth: 100, thumbHeight: 50, thumbAmount: 5, navigationType: "bullet", navigationArrows: "none", touchenabled: "on", onHoverStop: "off", swipe_velocity: 0.7, swipe_min_touches: 1, swipe_max_touches: 1, drag_block_vertical: false, parallax: "mouse", parallaxBgFreeze: "on", parallaxLevels: [7, 4, 3, 2, 5, 4, 3, 2, 1, 0], keyboardNavigation: "off", navigationHAlign: "center", navigationVAlign: "bottom", navigationHOffset: 0, navigationVOffset: 40, shadow: 0, spinner: "spinner3", stopLoop: "off", stopAfterLoops: -0, stopAtSlide: -0, shuffle: "off", autoHeight: "off", forceFullWidth: "off", hideThumbsOnMobile: "off", hideNavDelayOnMobile: 1500, hideBulletsOnMobile: "off", hideArrowsOnMobile: "off", hideThumbsUnderResolution: 0, hideSliderAtLimit: 0, hideCaptionAtLimit: 0, hideAllCaptionAtLilmit: 0, startWithSlide: 0, fullScreenOffsetContainer: ".header" }); $(".bullet").click(); }); //ready Poderiam me ajudar por favor?
    • Por Luck_.
      Opa e ai blz ? bem galera eu não tenho a minima noção de como mexe com javascript muito menos jquery kk mas pra fazer um slideshow que preciso é necessário eu usar o jquery,porém a imagem do slideshow está fora da forma ,eu não sei como resolver se alguem poder ajudar.
       
      Código:
      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body style="padding:0px; margin:0px; background-color:#fff;font-family:arial,helvetica,sans-serif,verdana,'Open Sans'"> <!-- #region Jssor Slider Begin --> <!-- Generator: Jssor Slider Maker --> <!-- Source: https://www.jssor.com --> <script src="js2/jssor.slider-26.9.0.min.js" type="text/javascript"></script> <script type="text/javascript"> jssor_1_slider_init = function() { var jssor_1_options = { $AutoPlay: 1, $Idle: 0, $SlideDuration: 5000, $SlideEasing: $Jease$.$Linear, $PauseOnHover: 4, $SlideWidth: 140, $Cols: 7, $Align: 0 }; var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); /*#region responsive code begin*/ var MAX_WIDTH = 980; function ScaleSlider() { var containerElement = jssor_1_slider.$Elmt.parentNode; var containerWidth = containerElement.clientWidth; if (containerWidth) { var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth); jssor_1_slider.$ScaleWidth(expectedWidth); } else { window.setTimeout(ScaleSlider, 30); } } ScaleSlider(); $Jssor$.$AddEvent(window, "load", ScaleSlider); $Jssor$.$AddEvent(window, "resize", ScaleSlider); $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); /*#endregion responsive code end*/ }; </script> <style> /* jssor slider loading skin spin css */ .jssorl-009-spin img { animation-name: jssorl-009-spin; animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes jssorl-009-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:300px;overflow:hidden;visibility:hidden;"> <!-- Loading Screen --> <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);"> <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" /> </div> <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:100px;overflow:hidden;"> <!-- <div data-p="30.00"> <img data-u="image" src="imgs/001.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/002.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/003.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/004.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/009.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/010.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/019.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/020.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/021.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/022.jpg" /> </div> <div data-p="30.00"> <img data-u="image" src="imgs/024.jpg" /> </div> </div>--> <div data-p="30.00"> <img data-u="image" src="Imagens/3.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/4.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/5.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/6.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/7.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/8.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/9.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/10.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/11.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/12.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/13.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/14.png" /> </div> </div> </div> <script type="text/javascript">jssor_1_slider_init();</script> <!-- #endregion Jssor Slider End --> </body> </html> Print: 
×

Informação importante

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