0

Faz tempo que tento adicionar animações de textos da biblioteca animate.css ao Owl Carousel, para deixar os Slider cada vez mais bonitos e elegantes, no entanto não consigo, só funcionar o primeiro slider assim que carrega a página, quando eu passo para frente os textos ficam estáticos.

Eu achei um exemplo na internet que seria quase o que eu precisava, só que eu não entendi muito bem o código e ele não da opção de usar o data-wow-delay, queria saber se tem como fazer isso só que usando a estrutura tradicional, até porque eu vou depois puxar essas opções do Wordpress através de campos personalizados.

<div class="owl-carousel owl-theme">

    <div class="item">
        <h4 class="wow fadeInDown">Slide 1</h4>
        <p class="wow fadeInUp" data-wow-delay="0.8s">Cras a elementum dolor. Praesent aliquam sapien ac eros semper ullamcorper. Sed imperdiet enim at sodales suscipit. Aenean eget faucibus ipsum.</p>
    </div>

    <div class="item">
        <h4 class="wow fadeInLeft">Slide 2</h4>
        <p class="wow fadeInRight" data-wow-delay="1.5s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dolor pulvinar, mollis orci vitae, molestie elit. Maecenas scelerisque ipsum nibh, id imperdiet nulla lobortis nec.</p>
    </div>

</div>

1 Resposta 1

0

A solução que usei foi inserindo o animation quando a class active estiver presente Ex.:

.item.active { animation: exemplo .... }

Mas nesse caso criei a animação na mão.

1
  • Na mão fica muito engessado Commented 23/05/2018 às 10:52

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 .