Carlos Rocha Posted May 4, 2018 at 11:13 AM Report #610442 Posted May 4, 2018 at 11:13 AM Estou tentando fazer um slide show personalizado para fins de aprendizagem. Avancei bastante já. Porém estou tendo um erro do qual não estou conseguindo me livrar. O slide corre bem, mas quando chega na ultima imagem, ele acha uma imagem em branco e bota ela no lugar em que deveria ser exibida a primeira imagem novamente. Cada imagem do slide tem uma legenda feito com um label e ambos dentro de uma div. O link abaixo mostra o slide em funcionamento. http://funerariasaopedro.net.br/novo/index6.php Vou postar abaixo o código completo. Se alguém puder me ajudar desde já agradeço. CSS * { margin: 0; padding: 0; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } div.slider { overflow: hidden; position: relative; width: 100vw; height: 300px; } div.slider:hover { animation-play-state: paused; } div.slider > div.slide { display: none; position: absolute; top: 0; left: 0; width: 100%; height: auto; } div.slider div.slide img { width: 100%; } div.slider div.ativa { display: block; } div.slider div.ativa img { animation: slider 1s linear; animation-fill-mode: forwards; } div.slider div.ativa img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } @keyframes slider { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } div.slider div.slide span { position: absolute; width: 100%; line-height: 40px; bottom: 0; z-index: 500; color: rgb(255,255,255); text-align: center; } div.slider nav { position: absolute; bottom: 0; width: 100%; height: 40px; background-color: rgb(0, 0, 0, .5); z-index: 400; text-align: center; } div.slider nav button.anterior, div.slider nav button.proximo { position: absolute; width: 100px; height: 40px; text-align: center; } div.slider nav button.anterior { left: 10%; } div.slider nav button.proximo { right: 10%; } div.slider nav button.proximo label { top: calc(50%-20px); } JAVASCRIT <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(e) { //$("div.slider").height($("div.slider div.slide").height()) const blocos = $("div.slider div.slide"); function startslider() { ativa = $("div.slider div.ativa") if (!$(ativa).next().length) { ativa = blocos[0] } $(ativa) .removeClass("ativa") .next() .addClass("ativa") setTimeout(startslider, 5000) } setTimeout(startslider, 5000) $("nav button.anterior").click(function(){ prev = $("div.slider div.ativa").prev(); // alert (blocos.length); prev = prev.length ? prev : blocos[ blocos.length - 1 ]; mostraBloco(prev); }) $("nav button.proximo").click(function(){ next = $("div.slider div.ativa").next(); next = next.length ? next : blocos[0]; mostraBloco(next); }) /* Função para exibir as imagens */ function mostraBloco(next) { ativa = $("div.slider div.ativa") $(ativa).removeClass("ativa") $(next).addClass("ativa") } }); </script> HTML <div class="slider"> <div class="slide fade ativa"> <img src="_img/_banner/_site/bg_1.jpg" /> <span>Este é 1</span> </div> <div class="slide fade"> <img src="_img/_banner/_site/bg_2.jpg" /> <span>Este é 2</span> </div> <div class="slide fade"> <img src="_img/_banner/_site/bg_3.jpg" /> <span>Este é 3</span> </div> <nav> <button class="anterior">Anterior</button> <button class="proximo">Próximo</button> </nav> </div>
Rui Carlos Posted May 4, 2018 at 05:50 PM Report #610445 Posted May 4, 2018 at 05:50 PM O teu problema é que estás a iterar por todos elementos incluídos na div slider: 3 divs que têm imagens e o elemento nav seguinte. Uma forma simples de resolveres o problema e não colocares o nav dentro da div slider. (Já agora, usando as developer tools do browser, com um breakpoint na função Javascript que te faz a troca de imagens, rapidamente conseguias descobrir qual o problema.) Rui Carlos Gonçalves
Carlos Rocha Posted May 4, 2018 at 06:09 PM Author Report #610447 Posted May 4, 2018 at 06:09 PM Sim, mas quando eu faço: const blocos = $("div.slider div.slide"); Eu não estaria iterando apenas sobre as divs.slide que existem dentro da div.slider?
Rui Carlos Posted May 4, 2018 at 06:17 PM Report #610448 Posted May 4, 2018 at 06:17 PM O problema está aqui: if (!$(ativa).next().length) { ativa = blocos[0] } $(ativa) .removeClass("ativa") .next() .addClass("ativa") Mais precisamente na utilização do next(), que nada impede de devolver o nav. Rui Carlos Gonçalves
Carlos Rocha Posted May 4, 2018 at 06:30 PM Author Report #610449 Posted May 4, 2018 at 06:30 PM Entendi! Mas o correto seria: const blocos = $("div.slider > div.slide"); ao invés de const blocos = $("div.slider div.slide"); Dessa forma eu elimino tudo que não for div.slide Deu certo aqui agora. Muito obrigado.
bioshock Posted May 4, 2018 at 06:37 PM Report #610450 Posted May 4, 2018 at 06:37 PM $(document).ready(function(e) { var current = 0; function slider() { $('div.slide').removeClass('ativa'); $('div.slide').eq(current).addClass('ativa'); } $('nav button.anterior').click(function() { if(current == 0) return; current--; slider(); }); $('nav button.proximo').click(function() { if(current >= $('div.slider div.slide').length - 1) return; current++; slider(); }); });
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now