doc: add tile with 2 images (#468)

apps/ngu-carousel-example/src/app/app-routing.module.ts

@@ -11,6 +11,11 @@ const routes: Routes = [
     path: 'tile',
     loadChildren: () => import('./tile/tile.module').then(m => m.TileModule)
   },
+  {
+    path: 'tile-2-images',
+    loadChildren: () =>
+      import('./tile-2-images/tile-2-images.module').then(m => m.Tile2ImagesModule)
+  },
   {
     path: 'banner-vertical',
     loadChildren: () =>

apps/ngu-carousel-example/src/app/main-nav/main-nav.component.html

@@ -1,48 +1,30 @@
 <mat-sidenav-container class="sidenav-container">
-  <mat-sidenav
-    #drawer
-    class="sidenav"
-    fixedInViewport
-    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-    [mode]="(isHandset$ | async) ? 'over' : 'side'"
-    [opened]="(isHandset$ | async) === false"
-  >
+  <mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
     <mat-toolbar>Banner Types</mat-toolbar>
     <mat-nav-list>
       <a mat-list-item routerLink="/tile">Tile</a>
       <a mat-list-item routerLink="/banner">Banner</a>
       <a mat-list-item routerLink="/banner-vertical">Banner Vertical</a>
+      <a mat-list-item routerLink="/tile-2-images">Tile with 2 Images</a>
       <a mat-list-item routerLink="/wrapped">Wrapped Carousel</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
-      <button
-        type="button"
-        aria-label="Toggle sidenav"
-        mat-icon-button
-        (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async"
-      >
+      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
+        *ngIf="isHandset$ | async">
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
       </button>
       <span>ngu-carousel Documentation</span>
       <span class="example-spacer"></span>
-      <a
-        href="https://github.com/uiuniversal/ngu-carousel"
-        target="_blank"
-        mat-button
-        class="github-button"
-      >
-        <img
-          class="github-icon"
-          src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg"
-          alt="Github"
-        />
+      <a href="https://github.com/uiuniversal/ngu-carousel" target="_blank" mat-button class="github-button">
+        <img class="github-icon"
+          src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg" alt="Github" />
         GitHub
       </a>
     </mat-toolbar>
     <!-- Add Content Here -->
     <router-outlet></router-outlet>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>

apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.component.css

@@ -0,0 +1,187 @@
+.bannerStyle div {
+  background-color: #ccc;
+  background-size: cover !important;
+  height: 100%;
+}
+
+.bannerStyle img {
+  width: 100%;
+  height: 100%;
+}
+
+.bannerStyle h1 {
+  text-align: center;
+  background: rgba(0, 0, 0, 0.32);
+  color: white;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tile {
+  min-height: 200px;
+  background-color: #ccc;
+  background-size: cover !important;
+}
+
+.tile h1 {
+  text-align: center;
+  line-height: 200px;
+  background: rgba(0, 0, 0, 0.32);
+  color: white;
+  margin: 0;
+}
+
+h4 {
+  margin: 0;
+  padding: 10px 15px;
+  text-align: center;
+}
+
+p {
+  margin: 0;
+  padding: 0 15px 10px;
+  text-align: center;
+}
+
+.wBg {
+  background: white;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+nav {
+  border-bottom: 1px solid #ccc;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  background: white;
+  z-index: 12;
+}
+
+nav h1 {
+  margin: 0;
+  padding: 10px;
+  text-align: center;
+}
+
+.carBtn {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  width: 50px;
+  height: 50px;
+  box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
+  border-radius: 999px;
+}
+
+.leftRs {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  width: 50px;
+  height: 50px;
+  box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
+  border-radius: 999px;
+  left: 0;
+  z-index: 1;
+}
+
+.rightRs {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  width: 50px;
+  height: 50px;
+  box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
+  border-radius: 999px;
+  right: 0;
+  z-index: 1;
+}
+
+.leftRs1 {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  width: 50px;
+  height: 50px;
+  box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
+  border-radius: 999px;
+  right: 0;
+}
+
+.rightRs1 {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  width: 50px;
+  height: 50px;
+  box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
+  border-radius: 999px;
+  left: 0;
+}
+
+.myPoint {
+  list-style-type: none;
+  text-align: center;
+  padding: 12px;
+  margin: 0;
+  white-space: nowrap;
+  overflow: auto;
+  box-sizing: border-box;
+  li {
+    display: inline-block;
+    border-radius: 50%;
+    border: 2px solid rgba(0, 0, 0, 0.55);
+    padding: 4px;
+    margin: 0 3px;
+    transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
+    transition: 0.4s;
+    &.active {
+      background: #6b6b6b;
+      transform: scale(1.2);
+    }
+  }
+}
+
+.carouselHoved {
+  opacity: 0.4;
+}
+
+.myBannerPoint {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  padding: 0;
+  color: beige;
+  justify-content: center;
+  list-style-type: none;
+  background: rgba(0, 0, 0, 0.34);
+  margin: 0;
+  padding: 10px;
+  box-sizing: border-box;
+  li {
+    background: #6b6b6b;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    &.active {
+      transform: translateY(-10px);
+      transition: 0.3s ease all;
+    }
+  }
+}

apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.component.html

@@ -0,0 +1,23 @@
+<ngu-carousel #myCarousel [inputs]="carouselTileConfig" [dataSource]="carouselTileItems$ | async">
+  <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5 : 1">
+    &lt;
+  </button>
+
+  <ngu-tile *nguCarouselDef="let item; index as i; let ani = animate" [@slider]="ani">
+    <div class="tile" [style.background]="'url(' + item + ')'">
+      <h1>{{ i + 1 }}</h1>
+    </div>
+  </ngu-tile>
+
+  <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5 : 1">
+    &gt;
+  </button>
+
+  <ul class="myPoint" NguCarouselPoint>
+    <li
+      *ngFor="let i of myCarousel.pointNumbers"
+      [class.active]="i === myCarousel.activePoint"
+      (click)="myCarousel.moveTo(i)"
+    ></li>
+  </ul>
+</ngu-carousel>

apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Tile2ImagesComponent } from './tile-2-images.component';
+
+describe('Tile2ImagesComponent', () => {
+  let component: Tile2ImagesComponent;
+  let fixture: ComponentFixture<Tile2ImagesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Tile2ImagesComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Tile2ImagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.component.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NguCarouselConfig } from '@ngu/carousel';
+import { interval, Observable } from 'rxjs';
+import { map, startWith, take } from 'rxjs/operators';
+import { slider } from '../slide-animation';
+
+@Component({
+  selector: 'app-tile-2-images',
+  templateUrl: './tile-2-images.component.html',
+  styleUrls: ['./tile-2-images.component.css'],
+  animations: [slider]
+})
+export class Tile2ImagesComponent {
+  images = ['assets/bg.jpg', 'assets/car.png'];
+
+  public carouselTileItems$: Observable<number[]>;
+  public carouselTileConfig: NguCarouselConfig = {
+    grid: { xs: 1, sm: 1, md: 1, lg: 5, all: 0 },
+    speed: 250,
+    point: {
+      visible: true
+    },
+    touch: true,
+    loop: true,
+    interval: { timing: 1500 },
+    animation: 'lazy'
+  };
+  tempData: any[];
+
+  constructor() {
+    this.tempData = [];
+    this.carouselTileItems$ = interval(500).pipe(
+      startWith(-1),
+      take(2),
+      map(() => {
+        const data = (this.tempData = [
+          ...this.tempData,
+          this.images[Math.floor(Math.random() * this.images.length)]
+        ]);
+
+        return data;
+      })
+    );
+  }