Ir para conteúdo
Bergs

Efeito de Slider

Recommended Posts

O efeito do slide é o seguinte:  quando  se clicar na seta de passar o slide (que tem formato circular e o ícone de seta), o próximo slide aparece com o circulo da seta de passar se expandindo e ocupando todo slide, esse próximo slide vai aparecendo dentro desse  circulo que se expande.

 

Alguém conhece o slide que faz esse efeito?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá rafael.souza coloquei um print de como é o efeito. 

Quando clica no botão de próximo um circulo que começa no botão vai expandindo para aparecer o próximo.

 

 

slide.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá rafael.souza! Não consegui encontrar o efeito. :persevere: 

 

Só apresenta o efeito slide e fade. Qual o nome do efeito? 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Davi M.
      Olá, queria a ajuda de alguém para tentar resolver um bug no meu slider, acontece que aparentemente ele funciona normalmente, mas em algum momento quando volto para olhar-lo as vezes ele começa a trocar as imagens de forma muito rápida, tipo em um e um segundo, mas logo para e funciona normal. Não consegui descobrir o porque. Duvido que vocês vão ter tempo e paciência de ficar olhando para o slider para ver o erro, então queria que vocês apenas olhassem para os códigos do meus slider e me dissesse se tem algo que eu estou fazendo de errado ou que poderia fazer melhor, afim de não term mais chances do slider ter esse bug. Obrigado.
       
      Código:
      <html>
        <head>
          <title>Slider</title>
          <style>
            /* SLIDER */
            * {
              margin:0;
              padding:0;
            }
            .slides {
                width: 100%;
                height: 100%;
                z-index: 200;
                position: relative;
                border-bottom: ridge blue 5px;
              }
              #imagem1, #imagem2, #imagem3 {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;
                z-index: 200;
              }
              #imagem2, #imagem3 {
                display: none;
              }
              #imagem1 {
                display: block;
              }
              /*Botões*/
             #B1, #B2, #B3 {
               z-index: 300;
               font-size: 50px;
             } 
             #B1v, #B2v, #B3v {
              z-index: 300;
              font-size: 50px;
             }
            #pausar1, #pausar2, #pausar3 {
              z-index: 300;
              font-size: 50px;
            }
            #continuar1, #continuar2, #continuar3 {
              z-index: 300;
              font-size: 50px;
              display: none;
            }
            .textoSlider {
              position: relative;
              top: -250px; 
              text-align: center;
              color: white;
              font-size: 30px;
              width: 80%;
              z-index: 300;
            }
            .saberMais {
              font-size: 20px;
              font-weight: bold;
              background-color: #00BFFF;
              width: 150px;
              padding-top: 10px;
              padding-bottom: 10px;
              border-radius: 5px;
              cursor: pointer;
              text-align: center;
              position: relative;
              bottom: 230px;
              z-index: 300;
            }
            .saberMais:hover {
              transform: scale(.9);
              transition: 1s;
              border-radius: 10px;
              background-color: #1E90FF;
            }
            .saberMais a:hover {
                color: orange;
            }
            .saberMais a {
                text-decoration: none;
                color: blue;
            }
            #controle {
                display: flex;
                justify-content: space-between;
            }
            .controleEstilo {
                width: 10%;
                height: 10%;
                margin: 10px;
                text-align: center;
                color: white;
                position: relative;
                bottom: 240px;
            }
            .controleEstilo:hover {
                color: #104af6;
                transition-duration: 1s;
            }
            .introducaoSlider {
                display: flex;
                justify-content: center;
            }
            .tituloSlider {
                font-size: 30px;
                color: red;
            }
            @media only screen and (max-width: 1100px) {
              .textoSlider {
                  font-size: 20px;
                  width: 95%;
              }
            }      
          </style>
        </head>
        <body>
          <!-- SLIDER -->
          <header>
            <ul>
              <li>
                <div id="imagem1">
                    <img src="https://joaobidu.com.br/wp-content/uploads/2017/05/foto-de-lua-crescente-550x367.jpg" class="slides">
                    <div class="introducaoSlider">
                      <div class="textoSlider">
                        <div class="tituloSlider">Titulo 1</div>
                        <label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
                        </div>
                    </div>
                    <div class="introducaoSlider">
                      <div class="saberMais"><a href="#titulo1" class="scroll">Saber Mais</a></div>
                    </div>
                    <div id="controle">
                      <div class="controleEstilo" id="B1v">&#65513;</div>
                      <div class="controleEstilo" id="pausar1">&#10073;&#10073;</div>
                      <div class="controleEstilo" id="continuar1">&#9655;</div>
                      <div class="controleEstilo" id="B1">&#65515;</div>
                    </div>
                </div>
              </li>
              <li>
                <div id="imagem2">
                    <img src="http://conexaoplaneta.com.br/wp-content/uploads/2016/05/cultivando-fases-da-lua-800.jpg" class="slides">
                    <div class="introducaoSlider">
                      <div class="textoSlider">
                        <div class="tituloSlider">Titulo 2</div>
                        <label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
                        </div>
                    </div>
                    <div class="introducaoSlider">
                      <div class="saberMais" ><a href="#titulo2" class="scroll">Saber Mais</a></div>
                    </div>
                    <div id="controle">
                      <div class="controleEstilo" id="B2v">&#65513;</div>
                      <div class="controleEstilo" id="pausar2">&#10073;&#10073;</div>
                      <div class="controleEstilo" id="continuar2">&#9655;</div>
                      <div class="controleEstilo" id="B2">&#65515;</div>
                    </div>
                </div>
              </li>
              <li>
                <div id="imagem3">
                    <img src="https://abrilclaudia.files.wordpress.com/2017/11/lua_cheia.jpg" class="slides">
                    <div class="introducaoSlider">
                      <div class="textoSlider">
                        <div class="tituloSlider">Titulo 3</div>
                        <label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
                        </div>
                    </div>
                    <div class="introducaoSlider">
                      <div class="saberMais"><a href="#titulo3" class="scroll">Saber Mais</a></div>
                    </div>
                    <div id="controle">
                      <div class="controleEstilo" id="B3v">&#65513;</div>
                      <div class="controleEstilo" id="pausar3">&#10073;&#10073;</div>
                      <div class="controleEstilo" id="continuar3">&#9655;</div>
                      <div class="controleEstilo" id="B3">&#65515;</div>
                    </div>
                </div>
              <li>
            </ul>
          </header>
          <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
          <script>
            //SLIDER

            var counter = 0
            var timer = setInterval(function() {
             
             
              counter++
              console.log(counter)
             
              
              //Troca slider sozinho
              if (counter === 10) {
                $("#imagem1").fadeOut("slow")
                $("#imagem2").fadeIn("slow")
              } else if (counter === 20) {
                $("#imagem2").fadeOut("slow")
                $("#imagem3").fadeIn("slow")
              } else if (counter === 30) {
                $("#imagem3").fadeOut("slow")
                $("#imagem1").fadeIn("slow")
                //reset
              } else if (counter > 30) {
                counter = 0
              }
               //Pausar/Continuar slider 1
              $("#pausar1").click(function() {
                counter = Number.NEGATIVE_INFINITY
              })
              $("#continuar1").click(function(){
                counter = 0
              })
              //Pausar/Continuar slider 2
              $("#pausar2").click(function() {
                counter = Number.NEGATIVE_INFINITY
              })
              $("#continuar2").click(function(){
                counter = 10
              })
              //Pausar/Continuar slider 3
              $("#pausar3").click(function() {
                counter = Number.NEGATIVE_INFINITY
              })
              $("#continuar3").click(function(){
                counter = 20
              })
            }, 500);

            //variaves usadas para pausar/continuar slider
            let continuar1 = $("#continuar1")
            let continuar2 = $("#continuar2")
            let continuar3 = $("#continuar3")
            let pausar1 = $("#pausar1")
            let pausar2 = $("#pausar2")
            let pausar3 = $("#pausar3")

            //Se clicar em pausar1 slide, pausar1 some e aparece continuar1
            pausar1.click(function(){
                //pausar some
                $("#pausar1").css('display', 'none')
                //continuar aparece
                $("#continuar1").css('display', 'block')
              })
              
              //Se cliclar em continuar1, continuar1 some e aparece pausar1
              continuar1.click(function(){
                //continuar some
                $("#continuar1").css('display', 'none')
                //pausar aparece
                $("#pausar1").css('display', 'block')
              })
            //Se clicar em pausar2 slide, pausar2 some e aparece continuar2
            pausar2.click(function(){
                //pausar some
                $("#pausar2").css('display', 'none')
                //continuar aparece
                $("#continuar2").css('display', 'block')
              })
              
              //Se cliclar em continuar2, continuar2 some e aparece pausar2
              continuar2.click(function(){
                //continuar some
                $("#continuar2").css('display', 'none')
                //pausar aparece
                $("#pausar2").css('display', 'block')
              })
              
              //Se clicar em pausar3 slide, pausar3 some e aparece continuar3
            pausar3.click(function(){
                //pausar some
                $("#pausar3").css('display', 'none')
                //continuar aparece
                $("#continuar3").css('display', 'block')
              })
              
              //Se cliclar em continuar3, continuar3 some e aparece pausar3
              continuar3.click(function(){
                //continuar some
                $("#continuar3").css('display', 'none')
                //pausar aparece
                $("#pausar3").css('display', 'block')
              })
              
            //Avançar
            $("#B1").click(function() {
              counter = counter = 10
              $("#imagem1").fadeOut("slow")
              $("#imagem2").fadeIn("slow")
            })
            $("#B2").click(function() {
              counter = counter = 20 
              $("#imagem2").fadeOut("slow")
              $("#imagem3").fadeIn("slow")
            })
            $("#B3").click(function() {
              counter = counter = 30
              $("#imagem3").fadeOut("slow")
              $("#imagem1").fadeIn("slow")
            })
            //Voltar
            $("#B1v").click(function() {
              counter = counter = 20
              $("#imagem1").fadeOut("slow")
              $("#imagem3").fadeIn("slow")
            })
            $("#B3v").click(function() {
              counter = counter = 10
              $("#imagem3").fadeOut("slow")
              $("#imagem2").fadeIn("slow")
            })
            $("#B2v").click(function() {
              counter = counter = 0
              $("#imagem2").fadeOut("slow")
              $("#imagem1").fadeIn("slow")
            })

            //Para arruamar bug no firefox que não aceita height:100% no modo celular
            var firefox  = navigator.userAgent.indexOf('Firefox') > -1;
            if (window = firefox){
              alert("Firefox")
              if (window.innerWidth < 1000) {
                $(".slides").css('max-height', '580px')
                $("header").css('max-height', '580px')
                alert("1000")
              } 
            }    
          </script>
        </body>
      </html>
    • Por Euler Belfortt
      Olá bom dia.
       
      Tenho uma aplicação android na qual tenho um slider que pego os dados do webserver php.
      Gostaria de saber como faço para abrir a url vinda do banco de dados, quando a imagem for clicada.
       
      Este é meu código eu fiz o código pegando como base uma URL fixa de uma variavel local. mas preciso pegar o a url que vem do banco seria a var = slider_url
      Se alguém puder me ajudar fico muito grato!
      private void makeGetSliderRequest() {         JsonArrayRequest req = new JsonArrayRequest(BaseURL.GET_SLIDER,                 new Response.Listener<JSONArray>() {                     @Override                     public void onResponse(JSONArray response) {                         Log.d(TAG, response.toString());                         try {                             // Parsing json array response                             // loop through each json object                             // arraylist list variable for store data;                             final ArrayList<HashMap<String, String>> listarray = new ArrayList<>();                             for (int i = 0; i < response.length(); i++) {                                 JSONObject jsonObject = (JSONObject) response                                         .get(i);                                 final HashMap<String, String> url_maps = new HashMap<String, String>();                                 url_maps.put("slider_title", jsonObject.getString("slider_title"));                                 url_maps.put("slider_image", BaseURL.IMG_SLIDER_URL + jsonObject.getString("slider_image")); url_maps.put("slider_url", BaseURL.IMG_SLIDER_URL + jsonObject.getString("slider_url"));                                 listarray.add(url_maps);                             }                             for (HashMap<String, String> name : listarray) {                                 final TextSliderView textSliderView = new TextSliderView(getActivity());                                 // initialize a SliderLayout                                 textSliderView                                         .description(name.get("slider_title"))                                         .image(name.get("slider_image"))                                         .setScaleType(BaseSliderView.ScaleType.Fit);                                 //adiciono o slider title no slider                                 textSliderView.bundle(new Bundle());                                 textSliderView.getBundle()                                         .putString("extra", name.get("slider_title"));                                 imgSlider.addSlider(textSliderView);                                 textSliderView.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {                                     @Override // Aqui eu capturo o clique na imagem e abro a url. // Preciso pegar a url desta string (slider_url) e inserir no lugar da string url                                     public void onSliderClick(BaseSliderView slider) {                                         String url = "http://www.google.com.br";                                         Toast.makeText(getActivity(), "clicou:", Toast.LENGTH_SHORT).show();                                         Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));                                         startActivity(browserIntent);                                     }                                 });                             }                         } catch (JSONException e) {                             e.printStackTrace();                             Toast.makeText(getActivity(),                                     "Error: " + e.getMessage(),                                     Toast.LENGTH_LONG).show();                         }                         hidepDialog();                     }                 }, new Response.ErrorListener() {             @Override             public void onErrorResponse(VolleyError error) {                 VolleyLog.d(TAG, "Error: " + error.getMessage());                 Toast.makeText(getActivity(),                         error.getMessage(), Toast.LENGTH_SHORT).show();                 hidepDialog();             }         });         // Adding request to request queue         AppController.getInstance().addToRequestQueue(req);     }  
    • Por Gabriela Sganzerla
      Ola!
      O masterslider do meu blog não esta exibindo o titulo.. http://www.gabrielareiko.com
      Estava normal até ontem.
      Alguém sabe como posso arrumar isso?
       
    • Por ggbelgamo
      Estou com um problema na hora de deixa o site responsivo, preciso que quando o meu menu for clicado e a div header descer, as setas do slider que estão definidas com position absolute devem descer junto com o slider, não invadindo o espaço do menu. Se elas estivesse dentro do meu container slider funcionaria, porém estou utilizando o plugin jquery cycle e tudo que ponho dentro da container-slider se torna um elemento de slide.
       
      <div class="topoResponsive"> <div class="header"> <div class="container-logo"> <a href="index.php"><div class="logo"></div></a> </div> <div class="container-menu"> <img class="menuToogle" src="assets/img/menu-toogle.png" alt=""> <ul class="nav"> <li><a href="sobre-nos.php">Quem somos</a></li> <li><a href="pecas-agricolas.php">Peças agrícolas</a></li> <li><a href="pecas-inox.php">Peças Inox</a></li> <li class="mostrarMenu"><a href="contato.php">Contato</a></li> <li><a target="_blank" href="https://www.google.com.br/search?biw=1280&bih=566&tbm=nws&ei=AhK8WpKCAsiJwgSV3bPQBQ&q=agroneg%C3%B3cio&oq=agroneg%C3%B3cio&gs_l=psy-ab.3..0l10.3154.5498.0.5666.11.7.0.4.4.0.137.722.0j6.6.0....0...1c.1.64.psy-ab..1.10.737....0.HM95MZwK05g">Notícias</a></li> </ul> </div> </div> </div> <div class="slider"> <figure> <img src="assets/img/slide2.png" /> <figcaption> <p>Indústria e comércio de peças</p> <div class="btn-slider"><a href="pecas-inox.php">Clique e conheça</a></div> </figcaption> </figure> <figure> <img src="assets/img/slide1.png" /> <figcaption> <p>Solicite agora um orçamento!</p> <div class="btn-slider"><a href="contato.php">Entrar em contato</a></div> </figcaption> </figure> </div> <a class="arrowsSlider" id="prevSlider" href=""><img width="60px" src="assets/img/LeftArrow.png"/></a> <a class="arrowsSlider" id="nextSlider" href=""><img width="60px" src="assets/img/rightArrow.png"/></a> /* CONTAINER SLIDER */ .slider{ position: relative; height: auto; width: 100%; z-index: 1; margin: 0 auto; } .slider img { width: 100%; height: auto; } .arrowsSlider{ position: absolute; height: 100px; top: 50%; margin-top: -50px; z-index: 2; opacity: 0.5; transition: 0.5s; } .arrowsSlider:hover{ opacity: 1; } #nextSlider{ right: 0; } .slider figcaption{ position: absolute; text-align: center; color: #FFF; top: 50%; left: 50%; width: 400px; height: 150px; margin-left: -200px; margin-top: -75px; z-index: 2; } .slider figcaption p{ font-family: Myriad; font-size: 40px; font-weight: bold; } .btn-slider{ position: absolute; width: 210px; height: 40px; left: 50%; margin-left: -105px; border: 2px solid #FFF; transition: 0.5s; text-align: center; cursor: pointer; } .btn-slider a { font-family: Helvetica; font-weight: bold; color: #FFF; line-height: 40px; text-decoration: none; } .btn-slider:hover{ background: #FFF; } .btn-slider:hover a{ color: #4F4F4F; } PRINT DO PROBLEMA: https://imgur.com/a/FuYLB
       
    • Por aqiluciano
      Não entendo muito, mas tentei resolver e não consegui. 
      O slider de fotos não está mais funcionando (Botões e nem o modo "Swiper").
      Alguém pode me ajudar, por gentileza?
       
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <title>MODAL SWIPER</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/swiper2.css"> <link rel="stylesheet" href="css/bootstrap.min.css""> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <div class="wrapper"> <a class="sm_open" data-modal="examplePlain" data-effect="pushdown">BOTÃO</a></li> </div> <div class="slim_modal" id="examplePlain"> <div class="sm_content"> <div class="sm_content_inner_wrap"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="1.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="2.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="3.jpg"> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-white"></div> <!-- Add Navigation --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <a class="sm_close sm_close_button">CLOSE</a> </div> </div> </div> <script src="js/index.js"></script> <!-- Swiper JS --> <script src="js/swiper.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { zoom: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html>  
×

Informação importante

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