Jump to content
Rogerio Pancini

Ajuda para slider

Recommended Posts

Boa tarde pessoal.

 

Para essa missão, estou sem ideias.

Para sliders mais elaborados uso o Slider Revolution e mais básicos, o Wow Slider, sempre mesclando com o PHP.

Na imagem é possível visualizar o que acontece:

Do lado direito tem alguns tópicos.

Eu preciso fazer um slider que, ao invés de clicar no bullet mude, que mude ao clicar em algum dos tópicos.

 

Se alguém tiver alguma ideia, eu agradeço.

 

PS: Não levem muito em consideração a arte. eu e o Photoshop não conversamos muito bem...

ajuda.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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
       
       
    • By 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>
    • By 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);     }  
    • By 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?
       
    • By Bergs
      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?
       
×

Important Information

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