angular-image-slider/fesm5/angular-image-slider.js

**Slider based on Angular 2+, currently supports Angular 8**

import { __decorate } from 'tslib';
import { SecurityContext, Input, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
import { trigger, state, style, transition, animate } from '@angular/animations';

var SliderComponent = /** @class */ (function () {
    function SliderComponent(sanitizer) {
        this.sanitizer = sanitizer;
        this.autoRotate = false;
        this.autoRotateAfter = 5000;
        this.autoRotateRight = true;
        this.safeUrls = [];
        this.state = 'void';
        this.disableSliderButtons = false;
    }
    SliderComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.images.forEach(function (element) {
            var safeUrl = _this.sanitizer.sanitize(SecurityContext.URL, element);
            _this.safeUrls.push(safeUrl);
        });
        this.imageUrls = this.safeUrls;
        if (this.autoRotate) {
            var source = interval(this.autoRotateAfter);
            this.subscription = source.subscribe(function () {
                return (_this.autoRotateRight) ? _this.moveLeft() : _this.moveRight();
            });
        }
    };
    SliderComponent.prototype.imageRotate = function (arr, reverse) {
        if (reverse) {
            arr.unshift(arr.pop());
        }
        else {
            arr.push(arr.shift());
        }
        return arr;
    };
    SliderComponent.prototype.moveLeft = function () {
        if (this.disableSliderButtons) {
            return;
        }
        this.state = 'right';
        this.imageRotate(this.imageUrls, true);
    };
    SliderComponent.prototype.moveRight = function () {
        if (this.disableSliderButtons) {
            return;
        }
        this.state = 'left';
        this.imageRotate(this.imageUrls, false);
    };
    SliderComponent.prototype.onFinish = function ($event) {
        this.state = 'void';
        this.disableSliderButtons = false;
    };
    SliderComponent.prototype.onStart = function ($event) {
        this.disableSliderButtons = true;
    };
    SliderComponent.ctorParameters = function () { return [
        { type: DomSanitizer }
    ]; };
    __decorate([
        Input()
    ], SliderComponent.prototype, "images", void 0);
    __decorate([
        Input()
    ], SliderComponent.prototype, "autoRotate", void 0);
    __decorate([
        Input()
    ], SliderComponent.prototype, "autoRotateAfter", void 0);
    __decorate([
        Input()
    ], SliderComponent.prototype, "autoRotateRight", void 0);
    SliderComponent = __decorate([
        Component({
            selector: 'angular-image-slider',
            template: "<div id=\"container\">\n  <div class=\"overlay-left\"></div>\n  <div class=\"overlay-right\"></div>\n  <div id=\"grid\" class=\"image-cropper\">\n    <img *ngFor=\"let url of imageUrls; let i = index\" \n      [@move]=\"state\" \n      (@move.done)=\"onFinish($event)\" \n      (@move.start)=\"onStart($event)\" \n      [attr.class]=\"i\" \n      [src]=\"url\"\n      alt=\"\" />\n  </div>\n  <div>\n    <a id=\"slider-buttons-left\" (click)=\"moveLeft()\">&#10094;</a>\n    <a id=\"slider-buttons-right\" (click)=\"moveRight()\">&#10095;</a>\n  </div>\n</div>",
            animations: [
                trigger('move', [
                    state('in', style({ transform: 'translateX(0)' })),
                    transition('void => left', [
                        style({ transform: 'translateX(100%)' }),
                        animate(200)
                    ]),
                    transition('left => void', [
                        animate(200, style({ transform: 'translateX(0)' }))
                    ]),
                    transition('void => right', [
                        style({ transform: 'translateX(-100%)' }),
                        animate(200)
                    ]),
                    transition('right => void', [
                        animate(200, style({ transform: 'translateX(0)' }))
                    ])
                ])
            ],
            styles: ["#container{position:relative;overflow-x:hidden}#grid{display:-ms-grid;display:grid;height:150;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:300px;grid-template-rows:300px;grid-column-gap:20px}.overlay-left{position:absolute;display:inline-block;display:-ms-grid;display:grid;width:7rem;height:100%;top:0;left:0;bottom:0;background-color:#fff;z-index:1;cursor:pointer}.overlay-right{position:absolute;display:inline-block;display:-ms-grid;display:grid;width:7rem;height:100%;top:0;right:0;bottom:0;background-color:#fff;z-index:1;cursor:pointer}#grid>div{background-color:gray}#slider-buttons-left{position:absolute;z-index:1000;top:130px;float:left;cursor:pointer;font-size:250%;color:#789;left:60px}#slider-buttons-right{position:absolute;top:130px;z-index:1000;float:right;cursor:pointer;font-size:250%;color:#789;right:60px}.image-cropper{height:300px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.image-cropper img{max-width:100%;max-height:100%;display:block;margin:0 auto}"]
        })
    ], SliderComponent);
    return SliderComponent;
}());

var SliderModule = /** @class */ (function () {
    function SliderModule() {
    }
    SliderModule = __decorate([
        NgModule({
            imports: [
                CommonModule
            ],
            declarations: [
                SliderComponent
            ],
            exports: [SliderComponent]
        })
    ], SliderModule);
    return SliderModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { SliderModule, SliderComponent as ɵa };
//# sourceMappingURL=angular-image-slider.js.map