Jump to content

Search the Community

Showing results for tags 'slideshow'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 11 results

  1. 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
  2. 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
  3. 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?
  4. 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:
  5. 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>
  6. 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"; }
  7. 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.
  8. 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?
  9. (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 :)
  10. gsn200

    meu slide ?

    coloco o style display: block nas imgs so que não funciona. aqui o modelo do slideshow
  11. 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>.
×

Important Information

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