-
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">￩</div>
<div class="controleEstilo" id="pausar1">❙❙</div>
<div class="controleEstilo" id="continuar1">▷</div>
<div class="controleEstilo" id="B1">￫</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">￩</div>
<div class="controleEstilo" id="pausar2">❙❙</div>
<div class="controleEstilo" id="continuar2">▷</div>
<div class="controleEstilo" id="B2">￫</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">￩</div>
<div class="controleEstilo" id="pausar3">❙❙</div>
<div class="controleEstilo" id="continuar3">▷</div>
<div class="controleEstilo" id="B3">￫</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 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?
-
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
-
