angular-image-slider/fesm2015/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';

let SliderComponent = class SliderComponent {
    constructor(sanitizer) {
        this.sanitizer = sanitizer;
        this.autoRotate = false;
        this.autoRotateAfter = 5000;
        this.autoRotateRight = true;
        this.safeUrls = [];
        this.state = 'void';
        this.disableSliderButtons = false;
    }
    ngOnInit() {
        this.images.forEach(element => {
            const safeUrl = this.sanitizer.sanitize(SecurityContext.URL, element);
            this.safeUrls.push(safeUrl);
        });
        this.imageUrls = this.safeUrls;
        if (this.autoRotate) {
            const source = interval(this.autoRotateAfter);
            this.subscription = source.subscribe(() => (this.autoRotateRight) ? this.moveLeft() : this.moveRight());
        }
    }
    imageRotate(arr, reverse) {
        if (reverse) {
            arr.unshift(arr.pop());
        }
        else {
            arr.push(arr.shift());
        }
        return arr;
    }
    moveLeft() {
        if (this.disableSliderButtons) {
            return;
        }
        this.state = 'right';
        this.imageRotate(this.imageUrls, true);
    }
    moveRight() {
        if (this.disableSliderButtons) {
            return;
        }
        this.state = 'left';
        this.imageRotate(this.imageUrls, false);
    }
    onFinish($event) {
        this.state = 'void';
        this.disableSliderButtons = false;
    }
    onStart($event) {
        this.disableSliderButtons = true;
    }
};
SliderComponent.ctorParameters = () => [
    { 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);

let SliderModule = class SliderModule {
};
SliderModule = __decorate([
    NgModule({
        imports: [
            CommonModule
        ],
        declarations: [
            SliderComponent
        ],
        exports: [SliderComponent]
    })
], SliderModule);

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

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