Initial commit

README.md

@@ -0,0 +1,3 @@
+# ngu-carousel-exh8fv
+
+[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/ngu-carousel-exh8fv)

angular.json

@@ -0,0 +1,126 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "demo-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "demo:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "demo"
+}

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "ngu-carousel",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "rxjs": "6.1.0",
+    "core-js": "2.5.5",
+    "zone.js": "0.8.26",
+    "hammerjs": "2.0.8",
+    "rxjs-compat": "6.1.0",
+    "@angular/core": "6.0.0",
+    "@angular/forms": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/router": "6.0.0",
+    "@types/hammerjs": "2.0.35",
+    "@angular/compiler": "6.0.0",
+    "@angular/animations": "6.0.2",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0"
+  },
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.901.1",
+    "@angular/cli": "~9.1.1",
+    "@angular/compiler-cli": "~9.1.1",
+    "@angular/language-service": "~9.1.1",
+    "@types/node": "^12.11.1",
+    "@types/jasmine": "~3.5.0",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-jasmine": "~3.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "protractor": "~5.4.3",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~3.8.3"
+  }
+}

src/app/app-animation.ts

@@ -0,0 +1,28 @@
+import {
+  AnimationTriggerMetadata,
+  animate,
+  state,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+
+/** Time and timing curve for expansion panel animations. */
+export const EXPANSION_PANEL_ANIMATION_TIMING =
+  '225ms cubic-bezier(0.4,0.0,0.2,1)';
+
+/** Animations used by the Material expansion panel. */
+export const btnAnim: AnimationTriggerMetadata = trigger('btnAnim', [
+  state('true', style({ opacity: 1, transform: 'translate3d(0,0,0)' })),
+  state(
+    'false',
+    style({
+      opacity: 0,
+      transform: `translate3d({{btn}}50px,0,0)`
+    }),
+    {
+      params: { btn: 'left' }
+    }
+  ),
+  transition('* => *', animate('300ms cubic-bezier(.75,-0.48,.26,1.52)'))
+]);

src/app/app.component.html

@@ -0,0 +1,16 @@
+<ngu-carousel #myCarousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" [dataSource]="carouselTileItems">
+  <ngu-tile *nguCarouselDef="let item; let i = index">
+    <div class="tile" [style.background]="'url(' + item + ')'" style="min-height: 200px">
+      <h1>{{i}}</h1>
+    </div>
+  </ngu-tile>
+  <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5:1">&lt;</button>
+  <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5:1">&gt;</button>
+  <ul class="myPoint" NguCarouselPoint>
+    <li *ngFor="let i of myCarousel.pointNumbers; let i = index" [class.active]="i==myCarousel.activePoint" (click)="myCarousel.moveTo(i)"
+      [style.background]="'url(' + carouselTileItems[i] + ')'"></li>
+  </ul>
+</ngu-carousel>
+
+<!-- {{carouselTileItems | json}} -->
+{{myCarousel.isFirst}} --- {{myCarousel.isLast}} --- {{myCarousel.pointNumbers}}