Ir para conteúdo

Arquivado

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

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

  • Conteúdo Similar

    • Por opl12
      Olá Mestres,
       
      Pesquisei mas não encontrei...
       
      Tem como pegar o garo selecionado de um Input Range?
      <label class="mt-3" for="customRange3">DIA</label> <input type="range" class="custom-range" min="01" max="31" step="1" id="customRange3"> Neste exemplo, tem uma time line de 1 a 31 (dias)... gostaria que ao selecionar carregasse o valor numa variável em PHP.
       
      vlw
       
       
    • 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
       
×

Informação importante

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