angular-image-slider
Version:
**Slider based on Angular 2+, currently supports Angular 8**
105 lines • 12.5 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, SecurityContext } from '@angular/core';
import { interval } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
import { Input } from '@angular/core';
import { animate, state, style, transition, trigger } 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 }
]; };
tslib_1.__decorate([
Input()
], SliderComponent.prototype, "images", void 0);
tslib_1.__decorate([
Input()
], SliderComponent.prototype, "autoRotate", void 0);
tslib_1.__decorate([
Input()
], SliderComponent.prototype, "autoRotateAfter", void 0);
tslib_1.__decorate([
Input()
], SliderComponent.prototype, "autoRotateRight", void 0);
SliderComponent = tslib_1.__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()\">❮</a>\n <a id=\"slider-buttons-right\" (click)=\"moveRight()\">❯</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;
}());
export { SliderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItaW1hZ2Utc2xpZGVyLyIsInNvdXJjZXMiOlsic3JjL2FwcC9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxlQUFlLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkUsT0FBTyxFQUFnQixRQUFRLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDOUMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEMsT0FBTyxFQUNMLE9BQU8sRUFDUCxLQUFLLEVBQ0wsS0FBSyxFQUNMLFVBQVUsRUFDVixPQUFPLEVBRVIsTUFBTSxxQkFBcUIsQ0FBQztBQTBCN0I7SUFhRSx5QkFBb0IsU0FBdUI7UUFBdkIsY0FBUyxHQUFULFNBQVMsQ0FBYztRQVZsQyxlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLG9CQUFlLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLG9CQUFlLEdBQUcsSUFBSSxDQUFDO1FBRXpCLGFBQVEsR0FBRyxFQUFFLENBQUM7UUFFZCxVQUFLLEdBQUcsTUFBTSxDQUFDO1FBQ2YseUJBQW9CLEdBQUcsS0FBSyxDQUFDO0lBSXBDLENBQUM7SUFFRCxrQ0FBUSxHQUFSO1FBQUEsaUJBY0M7UUFaQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxVQUFBLE9BQU87WUFDekIsSUFBTSxPQUFPLEdBQUcsS0FBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLEdBQUcsRUFBRSxPQUFPLENBQUMsQ0FBQztZQUN0RSxLQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUM5QixDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFD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Q0FBQztPQUNXLGVBQWUsQ0FpRTNCO0lBQUQsc0JBQUM7Q0FBQSxBQWpFRCxJQWlFQztTQWpFWSxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIFNlY3VyaXR5Q29udGV4dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uLCBpbnRlcnZhbCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQgeyBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgYW5pbWF0ZSxcbiAgc3RhdGUsXG4gIHN0eWxlLFxuICB0cmFuc2l0aW9uLFxuICB0cmlnZ2VyLFxuICBrZXlmcmFtZXNcbn0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FuZ3VsYXItaW1hZ2Utc2xpZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NsaWRlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NsaWRlci5jb21wb25lbnQuY3NzJ10sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdtb3ZlJywgW1xuICAgICAgc3RhdGUoJ2luJywgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDApJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IGxlZnQnLCBbXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgxMDAlKScgfSksXG4gICAgICAgIGFuaW1hdGUoMjAwKVxuICAgICAgXSksXG4gICAgICB0cmFuc2l0aW9uKCdsZWZ0ID0+IHZvaWQnLCBbXG4gICAgICAgIGFuaW1hdGUoMjAwLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoMCknIH0pKVxuICAgICAgXSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IHJpZ2h0JywgW1xuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTEwMCUpJyB9KSxcbiAgICAgICAgYW5pbWF0ZSgyMDApXG4gICAgICBdKSxcbiAgICAgIHRyYW5zaXRpb24oJ3JpZ2h0ID0+IHZvaWQnLCBbXG4gICAgICAgIGFuaW1hdGUoMjAwLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoMCknIH0pKVxuICAgICAgXSlcbiAgICBdKVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KCkgaW1hZ2VzOiBbYW55XTtcbiAgQElucHV0KCkgYXV0b1JvdGF0ZSA9IGZhbHNlO1xuICBASW5wdXQoKSBhdXRvUm90YXRlQWZ0ZXIgPSA1MDAwO1xuICBASW5wdXQoKSBhdXRvUm90YXRlUmlnaHQgPSB0cnVlO1xuXG4gIHB1YmxpYyBzYWZlVXJscyA9IFtdO1xuICBwdWJsaWMgaW1hZ2VVcmxzOiBhbnk7XG4gIHB1YmxpYyBzdGF0ZSA9ICd2b2lkJztcbiAgcHVibGljIGRpc2FibGVTbGlkZXJCdXR0b25zID0gZmFsc2U7XG4gIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXIpIHtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuXG4gICAgdGhpcy5pbWFnZXMuZm9yRWFjaChlbGVtZW50ID0+IHtcbiAgICAgIGNvbnN0IHNhZmVVcmwgPSB0aGlzLnNhbml0aXplci5zYW5pdGl6ZShTZWN1cml0eUNvbnRleHQuVVJMLCBlbGVtZW50KTtcbiAgICAgIHRoaXMuc2FmZVVybHMucHVzaChzYWZlVXJsKTtcbiAgICB9KTtcblxuICAgIHRoaXMuaW1hZ2VVcmxzID0gdGhpcy5zYWZlVXJscztcblxuICAgIGlmICh0aGlzLmF1dG9Sb3RhdGUpIHtcbiAgICAgIGNvbnN0IHNvdXJjZSA9IGludGVydmFsKHRoaXMuYXV0b1JvdGF0ZUFmdGVyKTtcbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gc291cmNlLnN1YnNjcmliZSgoKSA9PlxuICAgICAgICAodGhpcy5hdXRvUm90YXRlUmlnaHQpID8gdGhpcy5tb3ZlTGVmdCgpIDogdGhpcy5tb3ZlUmlnaHQoKSk7XG4gICAgfVxuICB9XG5cbiAgaW1hZ2VSb3RhdGUoYXJyLCByZXZlcnNlKSB7XG4gICAgaWYgKHJldmVyc2UpIHtcbiAgICAgIGFyci51bnNoaWZ0KGFyci5wb3AoKSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIGFyci5wdXNoKGFyci5zaGlmdCgpKTtcbiAgICB9XG4gICAgcmV0dXJuIGFycjtcbiAgfVxuXG4gIG1vdmVMZWZ0KCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVTbGlkZXJCdXR0b25zKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuc3RhdGUgPSAncmlnaHQnO1xuICAgIHRoaXMuaW1hZ2VSb3RhdGUodGhpcy5pbWFnZVVybHMsIHRydWUpO1xuICB9XG5cbiAgbW92ZVJpZ2h0KCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVTbGlkZXJCdXR0b25zKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuc3RhdGUgPSAnbGVmdCc7XG4gICAgdGhpcy5pbWFnZVJvdGF0ZSh0aGlzLmltYWdlVXJscywgZmFsc2UpO1xuICB9XG5cbiAgb25GaW5pc2goJGV2ZW50KSB7XG4gICAgdGhpcy5zdGF0ZSA9ICd2b2lkJztcbiAgICB0aGlzLmRpc2FibGVTbGlkZXJCdXR0b25zID0gZmFsc2U7XG4gIH1cblxuICBvblN0YXJ0KCRldmVudCkge1xuICAgIHRoaXMuZGlzYWJsZVNsaWRlckJ1dHRvbnMgPSB0cnVlO1xuICB9XG59XG4iXX0=