É só comigo ou mais alguém está com esse problema? Eu uso o Zurb Foundation para criar meus sites responsivos e TODOS os sliders do tipo fade dão problema. Tanto os plugins quanto os que eu faço na mão. E esses mesmos sliders, que eu uso eles puro, em nenhuma página apenas em uma página de teste ele se comporta bem. Algo está dando conflito e já to a 3 noites sem dormir rs.
-
E qual é o problema que está acontecendo com eles?– CaputoCommented 30/07/2014 às 13:14
-
2 problemas, em alguns casos ele não faz efeito fade, ele "pisca" de forma brusca. E em outros casos, quando a aba do site não é a principal ou quando ele fica muito tempo parado, ele "acumula" fades e exibe tudo de uma vez, como virando um efeito estroboscópico rs.– dsantoroCommented 30/07/2014 às 13:18
Adicione um comentário
|
2 Respostas
as CSS Eis o código que usei. Ajuste os links para imagens e scripts e (óbvio) link para as CSS do framework e do plugin na seção head da página.
<body>
<div class="row">
<div class="small-10 small-centered columns">
<div class="carrossel">
<div><img src="img1.jpg" alt="dinossauro1"></div>
<div><img src="img2.jpg" alt="dinossauro2"></div>
<div><img src="img3.jpg" alt="dinossauro3"></div>
<div><img src="img4.jpg" alt="dinossauro4"></div>
</div>
</div>
</div> <!-- /.row -->
<script src="../js/vendor/jquery.js"></script>
<script src="../js/vendor/fastclick.js"></script>
<script src="../js/foundation.min.js"></script>
<script>$(document).foundation();</script>
<script type="text/javascript" src="slick-master/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carrossel').slick({dots: true, autoplay: true, fade:true});
});
</script>
</body>
</html>
Para sliders o Foundation possui o plugin nativo Orbit que foi colocado em desuso e será retirado da versão 6 do framework, mas funciona até a versão 5 atual. Orbit sai porque já existem plugins responsivos mais avançados e a ZURB recomenda o uso do plugin Slick Carousel
-
Opa, eu sei dessa informação. O problema é que esse Slick Carousel, aparentemente, não tem o efeito de Fade com "autoplay", tipo, ele só faz o efeito clicando nas setinhas e não é isso q eu quero. E nem simulando um click via JS ele muda : (– dsantoroCommented 30/07/2014 às 13:31
-
O Orbit ele "funciona" mas o efeito fade dele dá uns "flashes" invés do fade.– dsantoroCommented 30/07/2014 às 13:32
-
Realmente não experimentei mas pela documentação me pareceu que é possível configurar autoplay + fade(kenwheeler.github.io/slick/#settings) Valeu a dica.– MaujorCommented 30/07/2014 às 14:06
-
Já tentei passar esses parametros mas não funcionou. Vou entrar em contato com o cara que fez o plugin, pois me parece muito pena que aparentemente nao funciona isso :(– dsantoroCommented 30/07/2014 às 14:08
-
Fiz uma experiência aqui com Foundation 5.3.1 e SlickCarrousel e funcionou legal.– MaujorCommented 30/07/2014 às 14:18