Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''slideshow''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 9 registros

  1. ZuptInformática

    Slide não passa automaticamente

    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?
  2. Luck_.

    Imagem mal ajustada jquery

    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:
  3. Mr. Whyte

    Aparecer imagem inicial em SlideShow

    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>
  4. Mr. Whyte

    Imagem inicial em slideshow

    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"; }
  5. joaomart

    Slideshow com Javascript

    Olá pessoal! Estou começando a programar em Javascript e recentemente tive dificuldades em criar um slideshow. Andei pesquisando em alguns sites até que achei um no W3Schools, fiz umas adaptações e consegui isto: HTML <div class="slideshow-container"> <div class="slide fade" style="background: url('imagem.png');"> <h2><a href="#">Título</a></h2> </div> <div class="slide fade" style="background: url('imagem2.png');"> <h2><a href="#">Título 2</a></h2> </div> <div class="slide fade" style="background: url('imagem3.png');"> <h2><a href="#">Título 3</a></h2> </div> </div> <a class="prev" onclick="plusSlides(-1)"><span class="fa fa-chevron-left"></span></a> <a class="next" onclick="plusSlides(1)"><span class="fa fa-chevron-right"></span></a> CSS .slide{ display: none; height: 200px; } .slide h2{ font-size: 35px; } .slideshow-container{ max-width: 300px; height: 200px; background: #000; } .slideshow-container img{ border-radius: 0; } .slideshow-container:hover .prev, .slideshow-container:hover .next{ opacity: 1; } .prev, .next{ opacity: 0; cursor: pointer; position: absolute; top: 50%; width: auto; padding: 20px; margin-top: -50px; color: #eee; font-weight: bold; transition: 0.4s ease; font-size: 40px; } .prev, .next:hover{ color: #ccc; } .next{ right: 0; } .prev:hover, .next:hover{ border: none;} .fade{ -webkit-animation-name: fade; -webkit-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } JavaScript var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("slide"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 5000); } function plusSlides(n) { tSlides(slideIndex += n); } function currentSlide(n) { tSlides(slideIndex = n); } function tSlides(n) { var i; var slides = document.getElementsByClassName("slide"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; } Então, como faço para ele parar quando eu posicionar o mouse sobre o slideshow? Agradeço para quem puder ajudar.
  6. klsofts

    SlideShow jQuery

    Fala pessoal, tudo bem? recentemente eu estive iniciando na linguagem jQuery e, após adquirir alguns conhecimentos básicos, resolvi tentar criar um slideshow por conta própria, para consolidar o pouco que aprendi até agora. Ocorre que eu "consegui" criar o SlideShow mas ele esta apresentando um comportamento estranho que não consigo revolver. Segue o código: CSS .off { display: none; } .on { display: block; width: 600px; height: 300px; box-shadow: 2px 2px 4px black; } HTML <figure> <img src="photos/ex1.png"/> <img src="photos/ex2.png"/> <img src="photos/ex3.png"/> </figure> Jquery $('figure img').addClass("off"); var now = 1; setInterval(function(){ if(now >= total){ now = 1; } $('figure img').addClass("off"); var total = $('figure img').length; var last = now - 1; $('figure img:nth-child('+last+')').removeClass("on"); $('figure img:nth-child('+last+')').removeClass("on"); $('figure img').addClass("off"); $('figure img:nth-child('+now+')').addClass("on"); $('figure img:nth-child('+now+')').removeClass("off"); now = now + 1; }, 6000); O que esta acontecendo é que quando abro a página, ele funciona corretamente e exibe as três fotos, uma de cada vez(exibe uma, ela some rapidamente e aparece a outra). Depois que ele exibe todas as imagens pela primeira fez ele começa a falhar e ao invés de exibir uma imagem de cada vez ele começa a mostrar todas as três, uma posicionada acima da outra. Como posso fazer para que ele funcione corretamente?
  7. (RNU) Ruan Silva

    Plugin Slideshow

    Boa noite a todos... Alguém pode indicar um plugin para um sistema de noticias ?? Já dei uma olhada em alguns, como este: http://tedk.com.br/blog/javascript-ajax-dhtml/usando-o-jquery-s3slider-para-slideshow-de-noticias/ mas ele parece apresentar alguns problemas na hora de adicionar vas li's. Quais são os mais utilizados atualmente? Obrigado pelas sugestões :)
  8. gsn200

    meu slide ?

    coloco o style display: block nas imgs so que não funciona. aqui o modelo do slideshow
  9. Bianka__As

    Slide em Javascript

    Preciso de um slideshow bem simples usando apenas Javascript ou Jquery, não utilizar o cycle. É apenas com três imagens e um botão next e outro para voltar. Já li muitos foruns e já vi vários vídeos mas não consegui. Preciso de um script simples que use apenas html,css e javascript ou query.(Já fiz o html e o css, as imagens estão dispostas em uma UL>.
×

Informação importante

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