Skip to content

Commit 36a465f

Browse files
santoshyadavdevsantoshyadavdev
authored
doc: add tile with 2 images (#468)
1 parent e392658 commit 36a465f

File tree

8 files changed

+314
-27
lines changed

8 files changed

+314
-27
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ const routes: Routes = [
1111
path: 'tile',
1212
loadChildren: () => import('./tile/tile.module').then(m => m.TileModule)
1313
},
14+
{
15+
path: 'tile-2-images',
16+
loadChildren: () =>
17+
import('./tile-2-images/tile-2-images.module').then(m => m.Tile2ImagesModule)
18+
},
1419
{
1520
path: 'banner-vertical',
1621
loadChildren: () =>

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

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,30 @@
11
<mat-sidenav-container class="sidenav-container">
2-
<mat-sidenav
3-
#drawer
4-
class="sidenav"
5-
fixedInViewport
6-
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
7-
[mode]="(isHandset$ | async) ? 'over' : 'side'"
8-
[opened]="(isHandset$ | async) === false"
9-
>
2+
<mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
3+
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
104
<mat-toolbar>Banner Types</mat-toolbar>
115
<mat-nav-list>
126
<a mat-list-item routerLink="/tile">Tile</a>
137
<a mat-list-item routerLink="/banner">Banner</a>
148
<a mat-list-item routerLink="/banner-vertical">Banner Vertical</a>
9+
<a mat-list-item routerLink="/tile-2-images">Tile with 2 Images</a>
1510
<a mat-list-item routerLink="/wrapped">Wrapped Carousel</a>
1611
</mat-nav-list>
1712
</mat-sidenav>
1813
<mat-sidenav-content>
1914
<mat-toolbar color="primary">
20-
<button
21-
type="button"
22-
aria-label="Toggle sidenav"
23-
mat-icon-button
24-
(click)="drawer.toggle()"
25-
*ngIf="isHandset$ | async"
26-
>
15+
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
16+
*ngIf="isHandset$ | async">
2717
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
2818
</button>
2919
<span>ngu-carousel Documentation</span>
3020
<span class="example-spacer"></span>
31-
<a
32-
href="https://github.com/uiuniversal/ngu-carousel"
33-
target="_blank"
34-
mat-button
35-
class="github-button"
36-
>
37-
<img
38-
class="github-icon"
39-
src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg"
40-
alt="Github"
41-
/>
21+
<a href="https://github.com/uiuniversal/ngu-carousel" target="_blank" mat-button class="github-button">
22+
<img class="github-icon"
23+
src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg" alt="Github" />
4224
GitHub
4325
</a>
4426
</mat-toolbar>
4527
<!-- Add Content Here -->
4628
<router-outlet></router-outlet>
4729
</mat-sidenav-content>
48-
</mat-sidenav-container>
30+
</mat-sidenav-container>

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

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
.bannerStyle div {
2+
background-color: #ccc;
3+
background-size: cover !important;
4+
height: 100%;
5+
}
6+
7+
.bannerStyle img {
8+
width: 100%;
9+
height: 100%;
10+
}
11+
12+
.bannerStyle h1 {
13+
text-align: center;
14+
background: rgba(0, 0, 0, 0.32);
15+
color: white;
16+
margin: 0;
17+
height: 100%;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
23+
.tile {
24+
min-height: 200px;
25+
background-color: #ccc;
26+
background-size: cover !important;
27+
}
28+
29+
.tile h1 {
30+
text-align: center;
31+
line-height: 200px;
32+
background: rgba(0, 0, 0, 0.32);
33+
color: white;
34+
margin: 0;
35+
}
36+
37+
h4 {
38+
margin: 0;
39+
padding: 10px 15px;
40+
text-align: center;
41+
}
42+
43+
p {
44+
margin: 0;
45+
padding: 0 15px 10px;
46+
text-align: center;
47+
}
48+
49+
.wBg {
50+
background: white;
51+
}
52+
53+
.container {
54+
max-width: 1200px;
55+
margin: 0 auto;
56+
}
57+
58+
nav {
59+
border-bottom: 1px solid #ccc;
60+
position: fixed;
61+
width: 100%;
62+
top: 0;
63+
background: white;
64+
z-index: 12;
65+
}
66+
67+
nav h1 {
68+
margin: 0;
69+
padding: 10px;
70+
text-align: center;
71+
}
72+
73+
.carBtn {
74+
position: absolute;
75+
margin: auto;
76+
top: 0;
77+
bottom: 0;
78+
width: 50px;
79+
height: 50px;
80+
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
81+
border-radius: 999px;
82+
}
83+
84+
.leftRs {
85+
position: absolute;
86+
margin: auto;
87+
top: 0;
88+
bottom: 0;
89+
width: 50px;
90+
height: 50px;
91+
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
92+
border-radius: 999px;
93+
left: 0;
94+
z-index: 1;
95+
}
96+
97+
.rightRs {
98+
position: absolute;
99+
margin: auto;
100+
top: 0;
101+
bottom: 0;
102+
width: 50px;
103+
height: 50px;
104+
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
105+
border-radius: 999px;
106+
right: 0;
107+
z-index: 1;
108+
}
109+
110+
.leftRs1 {
111+
position: absolute;
112+
margin: auto;
113+
top: 0;
114+
bottom: 0;
115+
width: 50px;
116+
height: 50px;
117+
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
118+
border-radius: 999px;
119+
right: 0;
120+
}
121+
122+
.rightRs1 {
123+
position: absolute;
124+
margin: auto;
125+
top: 0;
126+
bottom: 0;
127+
width: 50px;
128+
height: 50px;
129+
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
130+
border-radius: 999px;
131+
left: 0;
132+
}
133+
134+
.myPoint {
135+
list-style-type: none;
136+
text-align: center;
137+
padding: 12px;
138+
margin: 0;
139+
white-space: nowrap;
140+
overflow: auto;
141+
box-sizing: border-box;
142+
li {
143+
display: inline-block;
144+
border-radius: 50%;
145+
border: 2px solid rgba(0, 0, 0, 0.55);
146+
padding: 4px;
147+
margin: 0 3px;
148+
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
149+
transition: 0.4s;
150+
&.active {
151+
background: #6b6b6b;
152+
transform: scale(1.2);
153+
}
154+
}
155+
}
156+
157+
.carouselHoved {
158+
opacity: 0.4;
159+
}
160+
161+
.myBannerPoint {
162+
position: absolute;
163+
display: -webkit-box;
164+
display: -ms-flexbox;
165+
display: flex;
166+
width: 100%;
167+
left: 0;
168+
bottom: 0;
169+
padding: 0;
170+
color: beige;
171+
justify-content: center;
172+
list-style-type: none;
173+
background: rgba(0, 0, 0, 0.34);
174+
margin: 0;
175+
padding: 10px;
176+
box-sizing: border-box;
177+
li {
178+
background: #6b6b6b;
179+
width: 50px;
180+
height: 50px;
181+
margin-right: 10px;
182+
&.active {
183+
transform: translateY(-10px);
184+
transition: 0.3s ease all;
185+
}
186+
}
187+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<ngu-carousel #myCarousel [inputs]="carouselTileConfig" [dataSource]="carouselTileItems$ | async">
2+
<button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5 : 1">
3+
&lt;
4+
</button>
5+
6+
<ngu-tile *nguCarouselDef="let item; index as i; let ani = animate" [@slider]="ani">
7+
<div class="tile" [style.background]="'url(' + item + ')'">
8+
<h1>{{ i + 1 }}</h1>
9+
</div>
10+
</ngu-tile>
11+
12+
<button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5 : 1">
13+
&gt;
14+
</button>
15+
16+
<ul class="myPoint" NguCarouselPoint>
17+
<li
18+
*ngFor="let i of myCarousel.pointNumbers"
19+
[class.active]="i === myCarousel.activePoint"
20+
(click)="myCarousel.moveTo(i)"
21+
></li>
22+
</ul>
23+
</ngu-carousel>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { Tile2ImagesComponent } from './tile-2-images.component';
3+
4+
describe('Tile2ImagesComponent', () => {
5+
let component: Tile2ImagesComponent;
6+
let fixture: ComponentFixture<Tile2ImagesComponent>;
7+
8+
beforeEach(async () => {
9+
await TestBed.configureTestingModule({
10+
declarations: [Tile2ImagesComponent]
11+
}).compileComponents();
12+
13+
fixture = TestBed.createComponent(Tile2ImagesComponent);
14+
component = fixture.componentInstance;
15+
fixture.detectChanges();
16+
});
17+
18+
it('should create', () => {
19+
expect(component).toBeTruthy();
20+
});
21+
});

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NguCarouselConfig } from '@ngu/carousel';
3+
import { interval, Observable } from 'rxjs';
4+
import { map, startWith, take } from 'rxjs/operators';
5+
import { slider } from '../slide-animation';
6+
7+
@Component({
8+
selector: 'app-tile-2-images',
9+
templateUrl: './tile-2-images.component.html',
10+
styleUrls: ['./tile-2-images.component.css'],
11+
animations: [slider]
12+
})
13+
export class Tile2ImagesComponent {
14+
images = ['assets/bg.jpg', 'assets/car.png'];
15+
16+
public carouselTileItems$: Observable<number[]>;
17+
public carouselTileConfig: NguCarouselConfig = {
18+
grid: { xs: 1, sm: 1, md: 1, lg: 5, all: 0 },
19+
speed: 250,
20+
point: {
21+
visible: true
22+
},
23+
touch: true,
24+
loop: true,
25+
interval: { timing: 1500 },
26+
animation: 'lazy'
27+
};
28+
tempData: any[];
29+
30+
constructor() {
31+
this.tempData = [];
32+
this.carouselTileItems$ = interval(500).pipe(
33+
startWith(-1),
34+
take(2),
35+
map(() => {
36+
const data = (this.tempData = [
37+
...this.tempData,
38+
this.images[Math.floor(Math.random() * this.images.length)]
39+
]);
40+
41+
return data;
42+
})
43+
);
44+
}
45+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { NguCarouselModule } from '@ngu/carousel';
4+
5+
import { Tile2RoutingModule } from './tile-routing.module';
6+
import { Tile2ImagesComponent } from './tile-2-images.component';
7+
8+
@NgModule({
9+
declarations: [Tile2ImagesComponent],
10+
imports: [CommonModule, Tile2RoutingModule, NguCarouselModule]
11+
})
12+
export class Tile2ImagesModule {}

‎apps/ngu-carousel-example/src/app/tile-2-images/tile-routing.module.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
4+
import { Tile2ImagesComponent } from './tile-2-images.component';
5+
6+
const routes: Routes = [{ path: '', component: Tile2ImagesComponent }];
7+
8+
@NgModule({
9+
imports: [RouterModule.forChild(routes)],
10+
exports: [RouterModule]
11+
})
12+
export class Tile2RoutingModule {}

0 commit comments

Comments
 (0)