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 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>  
    • Por jardelcosta
      Olá!
       
      Gente, estou precisando de ajuda em relação a um carouser, slider...
       
      Estou usando o flexslider para mostrar um slider com fotos. De acordo com minha tela, são usados 25 fotos, cada slide mostra 5 fotos.. isso pelo tamanho que eu defini aqui.. enfim..
      eu coloquei um filtro de "masculino e feminino".
      Por padrão, o flexslider coloca na "<li>" display:block.
      No JS do filtro, (estou usando o bootstrap-portfilter.js - que tbm funciona igual ao "isotope") se eu filtro por "masculino", ele coloca display:none nas fotos das mulhes, mostrando apenas os homens.., sendo que, ele mostra as fotos dos homens, mas dps mostra o slide em branco.. 
       
      Como informei lá em cima, 25 fotos, 5 fotos por cada slide, 5 slide. exemplo: se eu aplica o filtro, 10 fotos, 5 fotos por slide, na teoria era pra aparecer 2 slide, mas ainda sim aparece 5. sendo que os ultimos aparecem em branco.
       
      Isso ocorre pq o flexslider já calculou a quantidade de slide, mas eu queria saber como posso fazer para meio dar um refresh, ou mostrar apenas os que quero.. 
       
       
      Se alguém conseguir ajudar agradeço demais...
       
       
×

Informação importante

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