0

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.

1 Resposta 1

0

Não conheço nenhum plugin de slider que ofereça esse efeito de forma nativa, mas o que pode ser feito é criar efeitos no próprio css da sua página.

Costumo usar o plugin animate.css para agilizar o desenvolvimento desse tipo de efeito. Com ele você consegue criar diversas formas de transições.

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 .