Possuo um flexslider em um Projeto, nele tenho a imagem de fundo e dentro uma div com descrição e botão para link externo. O que necessito fazer é que a cada mudança de slide, essa div tenha uma transição, como se fosse dar left 0 e até 3 segundos dar o left 400 por exemplo ou algo com opacidade. Alguém já precisou fazer alguma animação semelhante dentro do Flexslider?
Segue abaixo código:
<div class="flexslider">
<ul class="slides">
<li ng-repeat="banner in vm.bannerPublicidade" style="background-image: url({{vm.url_upload}}publicidade_{{vm.hashUpload}}/{{banner.imagem_publicidade}});" repeat-end="vm.slider()">
<div class="centralize__website">
<div class="center_description-Slider">
<div class="row">
<div class="cell">
<h2>
{{banner.titulo_publicidade}}
</h2>
<p ng-bind-html="banner.lead_publicidade | trustAs"></p>
<a href="{{i.link}}" target="_blank">
<md-button class="md-raised md-primary">Conheça</md-button>
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</li>
</ul>
<div class="buttonsSlider">
<div class="centralize__website">
<a ng-click="vm.scrollTo('hospitality_section')">
<md-button class="md-raised md-primary transparentButton">HOTELARIA</md-button>
</a>
<a ng-click="vm.scrollTo('tourism_section')">
<md-button class="md-raised md-primary transparentButton">TURISMO</md-button>
</a>
</div>
<hr>
<hr class="rightLine">
</div>
</div>
Javascript para ativar slider:
vm.slider = function () {
setTimeout(function () {
$('.flexslider').flexslider({
animation: "fade",
controlNav: false,
directionNav: false
});
}, 1);
}
A div que necessito do efeito, é a com a classe center_description-Slider, dentro dela é onde fica todo o conteúdo citado.
Algo semelhante a este slider.
Caso possível, recomendar algum Slider com esta função já implementada também facilitaria.