Image slider {{ 'SAMPLE' | translate }}

{{ 'FADING' | translate }}

{{ image.url }}

{{:: 'CODE' | translate}}

        <div pip-image-slider pip-animation-type="'fading'" class="w-stretch"
                pip-animation-interval="5000">
                <div class="pip-animation-block w-stretch" ng-repeat="image in images">
                    <img src="{{ src }}" alt="{{ src }}" class="w-stretch"/>
                </div>
        </div>
    

{{ 'CAROUSEL' | translate }}

{{ 'PREV_NEXT_BUTTONS' | translate }}

{{ 'SLIDER_INDICATORS' | translate }}

{{:: 'CODE' | translate}}

        <div pip-image-slider pip-animation-type="'carousel'" id="pip-carousel" class="w-stretch"
             pip-image-slider-index="slider2Index"
             pip-animation-interval="3000">
            <div class="pip-animation-block w-stretch" ng-repeat="image in images2">
                <img src="{{ src }}" alt="{{ src }}" class="w-stretch"/>
            </div>
        </div>

        <div class="w-stretch" layout="row" layout-align="center center">
            <md-button pip-slider-button pip-slider-id="'pip-carousel'" pip-button-type="'prev'">
                <md-icon md-svg-icon="icons:chevron-big-left"></md-icon>
            </md-button>
            <md-button pip-slider-button pip-slider-id="'pip-carousel'" pip-button-type="'next'">
                <md-icon md-svg-icon="icons:chevron-big-right"></md-icon>
            </md-button>
        </div>

        <div class="w-stretch" layout="row" layout-align="center center">
            <md-icon  ng-repeat="image in images2"
                     style="margin: 0px 20px"
                     pip-slider-indicator pip-slider-id="'pip-carousel'"
                     ng-class="{'color-accent': $index == slider2Index}" ng-attr-pip-slide-to="$index" 
                     md-svg-icon="{{ icon }}">
            </md-icon>
        </div>