6
Aqui fica uma sugestão com algumas alterações (http://jsfiddle.net/UwB64/3/):
adicionei mais uma div, um embrulho do que já tinha. Assim fica mais fácil ter o embrulho com width: 100% e overflow: hidden;, e dentro dele ter então uma div com 200%.
Sendo que esta nova div tem 200% ot .item passam a ter 50% cada
retirei o position: absolute; e usei o anomate ...
respondida 29/05/14 às 22:28
6
Fiz uma implementação que o galeria vai ter o mesmo tamanho do elemento a que ela pertence, se este elemento ocupar toda a tela, então a galeria irá ocupar toda a tela:
tentei evitar o uso de animações feitas em javaScript, para isto usei apenas CSS, deixando o JavaScript apenas com a missão de montar o CSS com as imagens (no caso uma URL em memoria) e ...
3
Bom fiz um modelo que segue o mesmo desenho do site, ficou bem simples creio que esse seja a ideia deixar ele bem didático e comentando o código segue abaixo.
obs: usei as imagens da pagina que o AP postou, então qualquer semelhança é mera cópia do site mesmo.
var t = {};
t.arrayGlobal = new Array();
t.sentido = 1;
t.iniSlide ...
respondida 30/11/15 às 19:56
SneepS NinjA
7.5901212 medalhas de ouro3939 medalhas de prata8181 medalhas de bronze
3
If não é um laço, mas sim um condicional. Cada condição deve retornar um verdadeiro ou falso (true / false para ser mais exato).
Veja um simples exemplo:
var nome = window.prompt("digite seu nome");
if(nome != null && nome != "")
{
alert(nome);
}
else{
alert("Voce nao informou seu nome");
}
ou seja, dentro dos () do seu codigo, você deve ...
3
Sem algum código fica difícil te ajudar 100%. Mas vamos lá:
Esse slider utiliza a mesma lista de imagens para os dois sliders (no slider principal não tem somente a imagem, mas tudo bem).
O que eu faria seria o seguinte:
Criaria div's com o tamanho da tela do usuário, colocaria o conteúdo e criaria as miniaturas em posição absoluta.
Com relação a javascript ...
3
A classe col-md-4 só é aplicada se a tela tiver pelo menos 970px de largura.
Para funcionar em dispositivos móveis adicione outras classes de acordo com o tamanho da tela conforme descrito na documentação em:
<div class="col-md-4" >
sugiro adicionar a classes col-xs-4 ou col-sm-4.
3
Apurar largura do elemento
Ao invés de estares a animar uma distancia fixa em pixeis, o ideal será apurares a largura que cada elemento do slider ocupa e deslocar essa mesma medida.
Em jQuery tens o método outerWidth() que te devolve a width+padding+margin do elemento, permitindo assim obter a largura total que o mesmo ocupa:
// obter largura do slide com ...
respondida 9/11/14 às 3:49
Zuul
34,8mil1818 medalhas de ouro8787 medalhas de prata180180 medalhas de bronze
2
Você está fazendo a conta errada pro deslocamento:
largura das caixas + margin+left = deslocamento
50px + 11px = 61px
Desloque +/- 61px, ao invés de 65px.
Veja o seu jsFiddle atualizado aqui.
respondida 9/11/14 às 0:29
Andre Figueiredo
4.93022 medalhas de ouro2020 medalhas de prata4444 medalhas de bronze
2
Bom dia!
Você pode simplesmente colocar uma altura, assim como:
height: 100vh;
Ou seja, ele pega 100 partes da tua tela para a div que você aplicar
Lembrando que se quiser que o slider e o menu pegue a mesma altura junto, você pode colocar por exemplo para o menu:
.menu{
height: 10vh;
}
.slider{
height: 90vh;
}
Ou talvez até deixar o menu como ...
2
Fiz apenas um exemplo básico.
Esses elementos começando pelo .slider deve estar dentro da DIV que monta o bloco do seu slider. Nunca usei esse bxslider, mas deve ser igual os outros.
.slider {
width: 800px;
display: table;
}
.box-1 {
float: left;
width: 580px;
height: 300px;
background-color: #000;
}
.box-2 {
float: left;
...
respondida 14/12/15 às 13:34
Diego Souza
16,4mil33 medalhas de ouro2626 medalhas de prata8282 medalhas de bronze
2
O seu código já está usando os efeitos de fadeIn e fadeOut do jQuery para fazer as transições.
Basta mudar os efeitos para os que desejar que aconteçam, dê uma olhada na lista da documentação jQuery Effects.
respondida 15/05/15 às 14:40
Dirty Old Man
1.06411 medalhas de ouro99 medalhas de prata3232 medalhas de bronze
2
Seu problema tem haver com o document.querySelector dentro do constructor da classe Slide. Ele retorna apenas 1 elemento do DOM, logo ele retorna somente a primeira div.
Você teria que usar o document.querySelectorAll e reescrever o código para, alem de atribuir classes ou ids distintos para cada div, para que cada secão responda de maneira independente aos ...
respondida 16/01 às 1:51
Cmte Cardeal
3.70055 medalhas de ouro1313 medalhas de prata3030 medalhas de bronze
1
A seta fazendo o divisor entre as sessões vc pode fazer utilizando um ::after na section. A seta nada mais é que um quadrado rotacionado para ficar igual um losangolo. Eu criei uma classe que chama .divisor, é só adiciona-la na sessão que quiser a seta abaixo.
Para a Galeria, eu usei @keyframes, para fazer o efeito fade entre as imagens. Para vc acrescentar ...
respondida 5/05/18 às 15:58
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Segue um modelo de Slider apenas com CSS rodando de 3 em 3 images. Ele foi todo feito em Flex então está bem responsivo e fácil de entender.
Fiz a animação com @keyframes então também é bem fácil de mexe nos intervalos e na duração total da animação.
Segue o exemplo que fiz: (clique em Executar para visualizar e em "Pagina toda" se quiser ver ampliado ...
respondida 15/03/18 às 23:50
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
O primei passo é setar o valor do intervalo dos sliders. Para isso utilizaremos o exemplo do próprio Jquery UI.
Basta setar o max do slider como o tamanho do array - 1, como no exemplo abaixo:
var arrayCPU = [2, 4, 8, 16, 32];
$("#sliderCPU").slider({
value: 0,
min: 0,
max: arrayCPU.length - 1
});
O próximo passo é utilizar o evento .slide() para ...
respondida 24/11/17 às 19:05
Randrade
21,5mil22 medalhas de ouro4545 medalhas de prata118118 medalhas de bronze
1
Resolvi o problema com uma solução bem simples, criei um outra div que simula o background do Slider, e utilizando padding nas laterais foi suficiente para criar essa limitação visual. Para resolver o problema do range, adicionei uma div interna para criar o range inicial.
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" )....
respondida 12/09/17 às 13:15
Paulo
9.8101313 medalhas de ouro4444 medalhas de prata8181 medalhas de bronze
1
Para fazer uma tarefa que se repete em intervalos constantes, você pode usar o setInterval. Tem um exemplo abaixo, só pra dar uma ideia mesmo, mas aconselho que você dê uma lida nos seguintes links:
Primeiro, pra entender o setInterval:
http://nodebr.com/funcoes-temporizadoras-embutidas-no-javascript-settimeout-e-setinterval/
Depois, dá uma olhada no ...
1
Da maneira que você quer eu não sei exatamento como fazer, mas posso te dar uma luz com o uso de um plugin chamado Slick slider.
URL: http://kenwheeler.github.io/slick/
Abraços!
1
Tente utilizar a classe .clearfix no slider, dê uma olhada na documentação http://getbootstrap.com/css/#helper-classes-clearfix
1
Se possível disponibilizar de uma forma prática o seu código ficaríamos gratos, mas de antemão posso adiantar esse código:
// repeat scroll while holding down button
repeater = function(b) {
scrollContent.css("margin-left", function(i, v) {
var v = parseInt(v, 10) + (b ? iw : -iw);
v = v < -c + p ? -c + p : v > 0 ? ...
1
Consegui resolver. Foi simples, até.
$(".owl-carousel-linhas").each(function (index, obj){
$(this).data('owlCarousel').destroy();
});
Troquei o obj por $(this).
respondida 16/06/15 às 14:51
Diego Souza
16,4mil33 medalhas de ouro2626 medalhas de prata8282 medalhas de bronze
1
Baseado no seu comentário, vou fazer uma alteração que talvez resolva o seu problema, colocando esse código dentro do seu if:
while($(".owl-carousel-linhas").length > 0){
$($(".owl-carousel-linhas")[0]).data('owlCarousel').destroy();
}
Verifique se isso resolve o seu problema.
respondida 16/06/15 às 14:39
Felipe Avelar
9.29233 medalhas de ouro3232 medalhas de prata5656 medalhas de bronze
1
No código que você postou faltava fechar um bloco. Com o fechamento do bloco, e mudando o show('drop') para fadeIn () você pode controlar o tempo que demorará para aparecer a div com slow, fast, ou em milisegundos.
Criei um fiddle pra demonstrar (como sugeriu o @Sergio numa pergunta minha :-)), e to postando abaixo o exemplo verificável. No exemplo ...
respondida 7/06/15 às 20:13
gustavox
3.93666 medalhas de ouro4242 medalhas de prata8989 medalhas de bronze
1
Sim, é possível, você já esta trabalhando com div's, basta coloca-las todas dentro de uma outra div e adicionar as class que criam esse efeito....
USANDO O FLICKITY
<div class="main-gallery">
<div id="DonuTchartIBV-MMS-1" class="donut gallery-cell"></div>
...
<div id="" class="gallery-cell"></div>
</div>
E ...
respondida 3/06/15 às 12:36
MarceloBoni
6.35533 medalhas de ouro2222 medalhas de prata5252 medalhas de bronze
1
Você pode usar plugins também para emular outros efeitos; Eu usava muito esse:
http://www.joelambert.co.uk/flux/
No próprio site do jquery também tem um diretório com plugins de efeito de animação:
https://plugins.jquery.com/tag/effect/
1
Resolvi da seguinte maneira:
<script type="text/javascript">
function simpleSlider(type){
var sliderActive = $("#slider .sliderActive");
if(type == 'prev') {
var sliderPrev = sliderActive.prev().length ? sliderActive.prev() : $("#slider li:last");
sliderPrev.addClass('...
respondida 26/05/15 às 18:24
GWER
2.15266 medalhas de ouro2121 medalhas de prata5050 medalhas de bronze
1
Existe uma demonstração disponibilizada pelo site jQueryDemo: Basic jQuery Image Slider sobre isso.
Adaptei o seu código ao exemplo (depois de executar, clique sobre Janela Toda para melhor visualização):
(function($) {
var primeiraImagem = $('#slider-content .slider-img:first').index();
var ultimaImagem = $('#slider-content .slider-img:last'...
respondida 16/03/15 às 0:18
stderr
30mil55 medalhas de ouro3939 medalhas de prata6969 medalhas de bronze
1
Ao invés de definir o código que passa para o próximo slide dentro do setInterval, você poderia simplesmente simular o click (onde é definida a passagem para o próximo item pelo jQuery) dentro desse setInterval.
Ou seja; ao invés de usar:
function autoSliderHighlights() {
setInterval(function() {
$('.containerHigh:eq(0)')
.fadeOut(800)....
respondida 3/02/15 às 11:00
1
Está resolvido:
HTML:
<div class="button" id="testNext">»</div>
<div class="button" id="testPrev">«</div>
<div id="test">
<div id="imgs">
<div class="img">
<img src="imgs/SaraSister.jpg">
</div>
<div class="img">
<img src="imgs/SaraSister.jpg"&...
respondida 21/01/15 às 16:35
Miguel
28,9mil55 medalhas de ouro3737 medalhas de prata7373 medalhas de bronze
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
slider × 68jquery × 28
html × 23
javascript × 22
css × 21
css3 × 4
wordpress × 4
php × 3
twitter-bootstrap × 3
jquery-ui × 3
bxslider × 3
html5 × 2
imagem × 2
mobile × 2
swift × 2
eventos-do-mouse × 2
slide × 2
owl-carousel × 2
flexslider × 2
mysql × 1
python × 1
ajax × 1
aplicação-web × 1
ios × 1
loop × 1