2

É 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.

2
  • E qual é o problema que está acontecendo com eles?
    – Caputo
    Commented 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.
    – dsantoro
    Commented 30/07/2014 às 13:18

2 Respostas 2

2

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>
1

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

6
  • 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 : (
    – dsantoro
    Commented 30/07/2014 às 13:31
  • O Orbit ele "funciona" mas o efeito fade dele dá uns "flashes" invés do fade.
    – dsantoro
    Commented 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.
    – Maujor
    Commented 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 :(
    – dsantoro
    Commented 30/07/2014 às 14:08
  • Fiz uma experiência aqui com Foundation 5.3.1 e SlickCarrousel e funcionou legal.
    – Maujor
    Commented 30/07/2014 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .