ngx-m-carousel
Version:
Simple and effective carousel library for angular
201 lines (194 loc) • 21.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, ElementRef, Component, ViewChild, Input, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i1 from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
class NgxMCarouselService {
constructor() { }
}
NgxMCarouselService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxMCarouselService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NgxMCarouselComponent {
constructor() {
this.images = [];
this.delay = 5000;
this.pauseOnHover = false;
this.width = '100%';
this.height = '100%';
this.indicators = true;
this.controls = true;
this.clickToFullScreen = true;
this.preserveRatioOnFullScreen = false;
this.slide = 'slideZero';
this.x = 0;
this.isFullScreen = false;
}
ngOnInit() {
this.toggle();
}
toggle() {
this.handler = setTimeout(() => {
if (this.x < (this.images.length - 1) * 100) {
this.x = this.x + 100;
this.slide = this.slide == "slideOne" ? "slideTwo" : "slideOne";
}
else {
this.slide = "slideZero";
this.x = 0;
}
this.toggle();
}, this.delay);
}
goTo(event, x) {
event.stopPropagation();
this.x = x * 100;
this.slide = this.slide == "slideOne" ? "slideTwo" : "slideOne";
window.clearTimeout(this.handler);
this.toggle();
this.onHover();
}
onHover() {
if (this.pauseOnHover)
window.clearTimeout(this.handler);
}
onLeave() {
if (this.pauseOnHover)
this.toggle();
}
openFullscreen() {
var _a, _b, _c, _d, _e, _f;
if (this.clickToFullScreen) {
this.isFullScreen = true;
if ((_a = this.carousel) === null || _a === void 0 ? void 0 : _a.nativeElement.requestFullscreen) {
(_b = this.carousel) === null || _b === void 0 ? void 0 : _b.nativeElement.requestFullscreen();
}
else if ((_c = this.carousel) === null || _c === void 0 ? void 0 : _c.nativeElement.webkitRequestFullscreen) { /* Safari */
(_d = this.carousel) === null || _d === void 0 ? void 0 : _d.nativeElement.webkitRequestFullscreen();
}
else if ((_e = this.carousel) === null || _e === void 0 ? void 0 : _e.nativeElement.msRequestFullscreen) { /* IE11 */
(_f = this.carousel) === null || _f === void 0 ? void 0 : _f.nativeElement.msRequestFullscreen();
}
}
}
closeFullScreen(event) {
event.stopPropagation();
this.isFullScreen = false;
if (this.isFullScreen && document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
}
NgxMCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxMCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: NgxMCarouselComponent, selector: "ngx-m-carousel", inputs: { images: "images", delay: "delay", pauseOnHover: "pauseOnHover", width: "width", height: "height", indicators: "indicators", controls: "controls", clickToFullScreen: "clickToFullScreen", preserveRatioOnFullScreen: "preserveRatioOnFullScreen" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #carousel (click)=\"openFullscreen()\" (mouseenter)=\"onHover()\" (mouseleave)=\"onLeave()\" class=\"main\"\n [style.width]=\"width\" [style.height]=\"height\" [style.display]=\"isFullScreen?'flex':'block'\">\n <div [@slide]=\"{value: slide, params: {translateValue: x}}\" class=\"carousel\">\n <img *ngFor=\"let img of images\" [src]=\"img\">\n </div>\n <div *ngIf=\"controls\" class=\"controls\">\n <span (click)=\"goTo($event,(x/100)>0?(x/100)-1:images.length-1)\" class=\"buttons prev\">\n <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 475.558 475.558\"\n style=\"enable-background:new 0 0 475.558 475.558;\" xml:space=\"preserve\">\n <circle style=\"fill:#ffffff;\" cx=\"237.779\" cy=\"237.779\" r=\"237.779\" />\n <path style=\"fill:#000000;\" d=\"M214.181,240.332c29.429-29.425,58.857-58.853,88.278-88.278\n c25.666-25.663-14.316-65.341-40.039-39.615c-36.029,36.029-72.055,72.055-108.084,108.084\n c-10.888,10.885-10.588,29.023,0.214,39.829c36.029,36.029,72.055,72.058,108.084,108.087\n c25.666,25.666,65.345-14.316,39.615-40.043C272.888,299.039,243.535,269.686,214.181,240.332z\" />\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n </svg>\n </span>\n <span (click)=\"goTo($event,(x/100)<images.length-1?(x/100)+1:0)\" class=\"buttons next\">\n <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 475.558 475.558\"\n style=\"enable-background:new 0 0 475.558 475.558;\" xml:space=\"preserve\">\n <circle style=\"fill:#ffffff;\" cx=\"237.779\" cy=\"237.779\" r=\"237.779\" />\n <path style=\"fill:#000000;\" d=\"M214.181,240.332c29.429-29.425,58.857-58.853,88.278-88.278\n c25.666-25.663-14.316-65.341-40.039-39.615c-36.029,36.029-72.055,72.055-108.084,108.084\n c-10.888,10.885-10.588,29.023,0.214,39.829c36.029,36.029,72.055,72.058,108.084,108.087\n c25.666,25.666,65.345-14.316,39.615-40.043C272.888,299.039,243.535,269.686,214.181,240.332z\" />\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n </svg>\n </span>\n </div>\n <div *ngIf=\"indicators\" class=\"indicators\">\n <ol class=\"carousel-buttons\">\n <li *ngFor=\"let img of images; let i = index\" (click)=\"goTo($event,i)\" [class.active]=\"x===i*100\"></li>\n </ol>\n </div>\n <span *ngIf=\"isFullScreen\" class=\"buttons close\" (click)=\"closeFullScreen($event)\">\n <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\" y=\"0px\" viewBox=\"0 0 252 252\" style=\"enable-background:new 0 0 252 252;\" xml:space=\"preserve\">\n <g>\n <path d=\"M126,0C56.523,0,0,56.523,0,126s56.523,126,126,126s126-56.523,126-126S195.477,0,126,0z M126,234\n\t\tc-59.551,0-108-48.449-108-108S66.449,18,126,18s108,48.449,108,108S185.551,234,126,234z\" />\n <path d=\"M164.612,87.388c-3.515-3.515-9.213-3.515-12.728,0L126,113.272l-25.885-25.885c-3.515-3.515-9.213-3.515-12.728,0\n\t\tc-3.515,3.515-3.515,9.213,0,12.728L113.272,126l-25.885,25.885c-3.515,3.515-3.515,9.213,0,12.728\n\t\tc1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636L126,138.728l25.885,25.885c1.757,1.757,4.061,2.636,6.364,2.636\n\t\ts4.606-0.879,6.364-2.636c3.515-3.515,3.515-9.213,0-12.728L138.728,126l25.885-25.885\n\t\tC168.127,96.601,168.127,90.902,164.612,87.388z\" />\n </g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n </svg>\n\n </span>\n</div>", styles: [".main{overflow:hidden;position:relative}img{width:100%}.carousel{display:flex;width:100%}.indicators{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%}.carousel-buttons li:before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:\"\"}.carousel-buttons li:after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:\"\"}.carousel-buttons li{position:relative;flex:0 1 auto;width:40px;height:5px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:#ffffff80;cursor:pointer}.carousel-buttons{list-style:none;display:flex}.carousel-buttons li.active{background-color:#fff}.buttons:hover{opacity:1!important}.controls{display:flex;align-items:center;justify-content:space-between;position:absolute;width:100%;height:100%;top:0}.buttons{filter:invert(100%);transition:opacity .3s;opacity:.5;cursor:pointer;width:5%;height:10%;background-size:contain;background-repeat:no-repeat}.next{transform:rotateY(180deg)}.close{position:absolute;top:5%;right:2.5%}.buttons.close{width:4%;height:8%}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
trigger('slide', [
state('slideOne', style({
transform: 'translateX(-{{translateValue}}%)'
}), { params: { translateValue: 0 } }),
state('slideTwo', style({
transform: 'translateX(-{{translateValue}}%)'
}), { params: { translateValue: 0 } }),
state('slideZero', style({}), { params: { translateValue: 0 } }),
state('slideBack', style({
transform: 'translateX({{translateValue}}%)'
}), { params: { translateValue: 0 } }),
transition('*=>slideOne', [
animate('1000ms ease-out')
]),
transition('*=>slideTwo', [
animate('1000ms ease-out')
]),
transition('*=>slideZero', [
style({ opacity: 0, transform: 'translateX(0)' }),
animate('1500ms ease-out', style({ opacity: 1 }))
])
]),
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-m-carousel', animations: [
trigger('slide', [
state('slideOne', style({
transform: 'translateX(-{{translateValue}}%)'
}), { params: { translateValue: 0 } }),
state('slideTwo', style({
transform: 'translateX(-{{translateValue}}%)'
}), { params: { translateValue: 0 } }),
state('slideZero', style({}), { params: { translateValue: 0 } }),
state('slideBack', style({
transform: 'translateX({{translateValue}}%)'
}), { params: { translateValue: 0 } }),
transition('*=>slideOne', [
animate('1000ms ease-out')
]),
transition('*=>slideTwo', [
animate('1000ms ease-out')
]),
transition('*=>slideZero', [
style({ opacity: 0, transform: 'translateX(0)' }),
animate('1500ms ease-out', style({ opacity: 1 }))
])
]),
], template: "<div #carousel (click)=\"openFullscreen()\" (mouseenter)=\"onHover()\" (mouseleave)=\"onLeave()\" class=\"main\"\n [style.width]=\"width\" [style.height]=\"height\" [style.display]=\"isFullScreen?'flex':'block'\">\n <div [@slide]=\"{value: slide, params: {translateValue: x}}\" class=\"carousel\">\n <img *ngFor=\"let img of images\" [src]=\"img\">\n </div>\n <div *ngIf=\"controls\" class=\"controls\">\n <span (click)=\"goTo($event,(x/100)>0?(x/100)-1:images.length-1)\" class=\"buttons prev\">\n <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 475.558 475.558\"\n style=\"enable-background:new 0 0 475.558 475.558;\" xml:space=\"preserve\">\n <circle style=\"fill:#ffffff;\" cx=\"237.779\" cy=\"237.779\" r=\"237.779\" />\n <path style=\"fill:#000000;\" d=\"M214.181,240.332c29.429-29.425,58.857-58.853,88.278-88.278\n c25.666-25.663-14.316-65.341-40.039-39.615c-36.029,36.029-72.055,72.055-108.084,108.084\n c-10.888,10.885-10.588,29.023,0.214,39.829c36.029,36.029,72.055,72.058,108.084,108.087\n c25.666,25.666,65.345-14.316,39.615-40.043C272.888,299.039,243.535,269.686,214.181,240.332z\" />\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n </svg>\n </span>\n <span (click)=\"goTo($event,(x/100)<images.length-1?(x/100)+1:0)\" class=\"buttons next\">\n <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 475.558 475.558\"\n style=\"enable-background:new 0 0 475.558 475.558;\" xml:space=\"preserve\">\n <circle style=\"fill:#ffffff;\" cx=\"237.779\" cy=\"237.779\" r=\"237.779\" />\n <path style=\"fill:#000000;\" d=\"M214.181,240.332c29.429-29.425,58.857-58.853,88.278-88.278\n c25.666-25.663-14.316-65.341-40.039-39.615c-36.029,36.029-72.055,72.055-108.084,108.084\n c-10.888,10.885-10.588,29.023,0.214,39.829c36.029,36.029,72.055,72.058,108.084,108.087\n c25.666,25.666,65.345-14.316,39.615-40.043C272.888,299.039,243.535,269.686,214.181,240.332z\" />\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n </svg>\n </span>\n </div>\n <div *ngIf=\"indicators\" class=\"indicators\">\n <ol class=\"carousel-buttons\">\n <li *ngFor=\"let img of images; let i = index\" (click)=\"goTo($event,i)\" [class.active]=\"x===i*100\"></li>\n </ol>\n </div>\n <span *ngIf=\"isFullScreen\" class=\"buttons close\" (click)=\"closeFullScreen($event)\">\n <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\" y=\"0px\" viewBox=\"0 0 252 252\" style=\"enable-background:new 0 0 252 252;\" xml:space=\"preserve\">\n <g>\n <path d=\"M126,0C56.523,0,0,56.523,0,126s56.523,126,126,126s126-56.523,126-126S195.477,0,126,0z M126,234\n\t\tc-59.551,0-108-48.449-108-108S66.449,18,126,18s108,48.449,108,108S185.551,234,126,234z\" />\n <path d=\"M164.612,87.388c-3.515-3.515-9.213-3.515-12.728,0L126,113.272l-25.885-25.885c-3.515-3.515-9.213-3.515-12.728,0\n\t\tc-3.515,3.515-3.515,9.213,0,12.728L113.272,126l-25.885,25.885c-3.515,3.515-3.515,9.213,0,12.728\n\t\tc1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636L126,138.728l25.885,25.885c1.757,1.757,4.061,2.636,6.364,2.636\n\t\ts4.606-0.879,6.364-2.636c3.515-3.515,3.515-9.213,0-12.728L138.728,126l25.885-25.885\n\t\tC168.127,96.601,168.127,90.902,164.612,87.388z\" />\n </g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n <g></g>\n </svg>\n\n </span>\n</div>", styles: [".main{overflow:hidden;position:relative}img{width:100%}.carousel{display:flex;width:100%}.indicators{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%}.carousel-buttons li:before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:\"\"}.carousel-buttons li:after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:\"\"}.carousel-buttons li{position:relative;flex:0 1 auto;width:40px;height:5px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:#ffffff80;cursor:pointer}.carousel-buttons{list-style:none;display:flex}.carousel-buttons li.active{background-color:#fff}.buttons:hover{opacity:1!important}.controls{display:flex;align-items:center;justify-content:space-between;position:absolute;width:100%;height:100%;top:0}.buttons{filter:invert(100%);transition:opacity .3s;opacity:.5;cursor:pointer;width:5%;height:10%;background-size:contain;background-repeat:no-repeat}.next{transform:rotateY(180deg)}.close{position:absolute;top:5%;right:2.5%}.buttons.close{width:4%;height:8%}\n"] }]
}], propDecorators: { carousel: [{
type: ViewChild,
args: ["carousel", { read: ElementRef }]
}], images: [{
type: Input
}], delay: [{
type: Input
}], pauseOnHover: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], indicators: [{
type: Input
}], controls: [{
type: Input
}], clickToFullScreen: [{
type: Input
}], preserveRatioOnFullScreen: [{
type: Input
}] } });
class NgxMCarouselModule {
}
NgxMCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxMCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselModule, declarations: [NgxMCarouselComponent], imports: [BrowserAnimationsModule], exports: [NgxMCarouselComponent] });
NgxMCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselModule, imports: [[
BrowserAnimationsModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxMCarouselModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxMCarouselComponent
],
imports: [
BrowserAnimationsModule
],
exports: [
NgxMCarouselComponent
]
}]
}] });
/*
* Public API Surface of ngx-m-carousel
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxMCarouselComponent, NgxMCarouselModule, NgxMCarouselService };
//# sourceMappingURL=ngx-m-carousel.mjs.map