Add css Transition to div in Flexslider

Question

I have a flexslider in a Project, in it I have the background image and inside a div with description and button for external link. What I need to do is that with each slide change, this div has a transition, as if it was going to give left 0 and up to 3 seconds give the left 400 for example or something with opacity. Has anyone ever needed to do any similar animation inside Flexslider?

Follows below code:

<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 to enable slider:

        vm.slider = function () {
        setTimeout(function () {
            $('.flexslider').flexslider({
                animation: "fade",
                controlNav: false,
                directionNav: false
            });
        }, 1);
    }

The div that I need the effect, is with the class center_description-Slider, inside it is where all the content cited.

Something similar to this slider.

If possible, recommend some Slider with this function already implemented would also facilitate.

Answer 1

I don’t know any slider plugin that offers this effect natively, but what can be done is to create effects on your page’s own css.

I usually use the plugin Animate.css to speed up the development of this type of effect. With it you can create several forms of transitions.