Skip to content

A
ati
Commit 55dbaf38 by amalk
Options

latest

parent f7907e24
Showing with 384 additions and 132 deletions
package-lock.json
...@@ -248,9 +248,9 @@ ...@@ -248,9 +248,9 @@
} }
}, },
"@angular/cdk": { "@angular/cdk": {
"version": "8.0.0", "version": "8.2.1",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.2.1.tgz",
"integrity": "sha512-2vsRWEHNARe0iRmqgzvM67gwfRy+aKvdef4Qu9L+ndSsTrrZT3tSgG8SMn1v9SfBHnx5G8mo4d1AMquXG69AuQ==", "integrity": "sha512-Y6xTxESrQlWw1kvSVWAs9cfeN/sYThrc/S9Ll4vekNkYSzye4mHHmDxzsKeGLR1tP+7urXTVz6xo44YUWVE7mw==",
"requires": { "requires": {
"parse5": "^5.0.0", "parse5": "^5.0.0",
"tslib": "^1.7.1" "tslib": "^1.7.1"
...@@ -457,9 +457,9 @@ ...@@ -457,9 +457,9 @@
} }
}, },
"@angular/flex-layout": { "@angular/flex-layout": {
"version": "8.0.0-beta.26", "version": "8.0.0-beta.27",
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.26.tgz", "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.27.tgz",
"integrity": "sha512-lXDLlMSNQhidW0grvisIsj/3gqLuYyN2MvABuRYybnFTc233sXGZuOAaulqq663LA0/DP/GNcz6a+A4ZAAlmPA==", "integrity": "sha512-qmpvQPesU4ZQ56IscwgmVRpK2UnyV+gwvXUql7TMv0QV215hLcHczjGsrKkLfW2By5E7XEyDat9br72uVXcPMw==",
"requires": { "requires": {
"tslib": "^1.7.1" "tslib": "^1.7.1"
} }
...@@ -3931,8 +3931,7 @@ ...@@ -3931,8 +3931,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -3953,14 +3952,12 @@ ...@@ -3953,14 +3952,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -3975,20 +3972,17 @@ ...@@ -3975,20 +3972,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -4105,8 +4099,7 @@ ...@@ -4105,8 +4099,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -4118,7 +4111,6 @@ ...@@ -4118,7 +4111,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -4133,7 +4125,6 @@ ...@@ -4133,7 +4125,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -4141,14 +4132,12 @@ ...@@ -4141,14 +4132,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -4167,7 +4156,6 @@ ...@@ -4167,7 +4156,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -4248,8 +4236,7 @@ ...@@ -4248,8 +4236,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -4261,7 +4248,6 @@ ...@@ -4261,7 +4248,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -4347,8 +4333,7 @@ ...@@ -4347,8 +4333,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -4384,7 +4369,6 @@ ...@@ -4384,7 +4369,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -4404,7 +4388,6 @@ ...@@ -4404,7 +4388,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -4448,14 +4431,12 @@ ...@@ -4448,14 +4431,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },
......
package.json
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^8.0.0", "@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0", "@angular/cdk": "^8.2.1",
"@angular/common": "~8.0.0", "@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0", "@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0", "@angular/core": "~8.0.0",
"@angular/flex-layout": "^8.0.0-beta.26", "@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "~8.0.0", "@angular/forms": "~8.0.0",
"@angular/material": "^8.0.0", "@angular/material": "^8.0.0",
"@angular/platform-browser": "~8.0.0", "@angular/platform-browser": "~8.0.0",
......
src/app/app.module.ts
...@@ -4,6 +4,7 @@ import { AppRoutingModule } from './app-routing.module'; ...@@ -4,6 +4,7 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module'; import { HomeModule } from './home/home.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
...@@ -15,6 +16,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ...@@ -15,6 +16,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
BrowserModule, BrowserModule,
BrowserAnimationsModule, BrowserAnimationsModule,
AppRoutingModule, AppRoutingModule,
FlexLayoutModule,
HomeModule HomeModule
], ],
providers: [], providers: [],
......
src/app/directives/carousel.directive.ts 0 → 100644
import { Directive, TemplateRef } from '@angular/core';
@Directive({
selector: '[carouselItem]'
})
export class CarouselDirective {
constructor(public tpl: TemplateRef<any>) {
}
}
\ No newline at end of file
src/app/home/cariusel/carousel.component.ts 0 → 100644
import { AfterViewInit, Component, ContentChildren, Directive, ElementRef, Input, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
import { CarouselDirective } from './../../directives/carousel.directive';
import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, style } from '@angular/animations';
@Directive({
selector: '.carousel-item'
})
export class CarouselItemElement {
}
@Component({
selector: 'carousel',
exportAs: 'carousel',
template: `
<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
<div *ngIf="showControls" style="margin-top: 1em">
<button (click)="next()" class="btn btn-default">Next</button>
<button (click)="prev()" class="btn btn-default">Prev</button>
</div>
`,
styles: [`
.offer_slider {
padding: 10px;
padding-top: 0px;
.slick-slide {
margin: 0 5px;
}
.slide {
position: relative;
padding-bottom: 10px;
.inner_slider {
height: 160px;
width: 100%;
.content_inner {
position: relative;
top: 10px;
left: 15px;
}
background-image: url("../../../assets/offer/offer_temp.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
border-bottom-right-radius: 0px;
position: relative;
.content_inner {
h3 {
margin: 0px;
padding: 0px;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
p {
margin: 0px;
padding: 0px;
color: #fff;
font-size: 13px;
font-weight: 300;
}
}
.coupon_code {
border: 1px dashed #fff;
background-size: 9px;
position: absolute;
bottom: 10px;
right: 10px;
border-radius: 3px;
background-image: url("../../../assets/offer/copy.png");
background-position: right 10px top 10px;
background-repeat: no-repeat;
padding-right: 30px;
font-size: 11px;
.code {
color: #fff;
padding: 8px;
border-right: 1px dashed #fff;
}
.copy {}
}
}
img {
position: absolute;
bottom: 7px;
right: 0px;
left: 55px;
width: calc(100% - 55px);
}
}
}
.carousel-wrapper {
overflow: hidden;
}
.carousel-inner {
display: flex;
}
`]
})
export class CarouselComponent implements AfterViewInit {
@ContentChildren(CarouselDirective) items: QueryList<CarouselDirective>;
@ViewChildren(CarouselItemElement, { read: ElementRef }) private itemsElements: QueryList<ElementRef>;
@ViewChild('carousel', {static: false}) private carousel: ElementRef;
@Input() timing = '250ms ease-in';
@Input() showControls = true;
private player: AnimationPlayer;
private itemWidth: number;
private currentSlide = 0;
carouselWrapperStyle = {}
next() {
if (this.currentSlide + 1 === this.items.length) return;
this.currentSlide = (this.currentSlide + 1) % this.items.length;
const offset = this.currentSlide * this.itemWidth;
const myAnimation: AnimationFactory = this.buildAnimation(offset);
this.player = myAnimation.create(this.carousel.nativeElement);
this.player.play();
}
private buildAnimation(offset) {
return this.builder.build([
animate(this.timing, style({ transform: `translateX(-${offset}px)` }))
]);
}
prev() {
if (this.currentSlide === 0) return;
this.currentSlide = ((this.currentSlide - 1) + this.items.length) % this.items.length;
const offset = this.currentSlide * this.itemWidth;
const myAnimation: AnimationFactory = this.buildAnimation(offset);
this.player = myAnimation.create(this.carousel.nativeElement);
this.player.play();
}
constructor(private builder: AnimationBuilder) {
}
ngAfterViewInit() {
// For some reason only here I need to add setTimeout, in my local env it's working without this.
setTimeout(() => {
this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width;
this.carouselWrapperStyle = {
width: `${this.itemWidth}px`
}
});
}
}
src/app/home/home.module.ts
...@@ -9,12 +9,12 @@ import { moduleRouting } from './home.routing'; ...@@ -9,12 +9,12 @@ import { moduleRouting } from './home.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DestinationComponent } from './destination/destination.component'; import { DestinationComponent } from './destination/destination.component';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { CarouselDirective } from './../directives/carousel.directive';
import { CarouselComponent, CarouselItemElement } from './cariusel/carousel.component';
@NgModule({ @NgModule({
declarations: [NavbarComponent, NavmenuComponent, MainmenuComponent, OffersComponent, IndexComponent, DestinationComponent], declarations: [NavbarComponent, NavmenuComponent, MainmenuComponent, OffersComponent, IndexComponent, DestinationComponent, CarouselDirective, CarouselItemElement, CarouselComponent],
imports: [ imports: [
CommonModule, CommonModule,
moduleRouting, moduleRouting,
......
src/app/home/index/index.component.html
...@@ -9,7 +9,39 @@ ...@@ -9,7 +9,39 @@
<span class="more">All Deals</span> <span class="more">All Deals</span>
</div> </div>
</h4> </h4>
<ati-offers></ati-offers> <!-- <ati-offers>
<ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="item">{{item.title}}</div>
</ng-container>
</ng-container>
</ati-offers> -->
<carousel>
<ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="offer_slider">
<div class="slide">
<div class="inner_slider">
<div class="content_inner">
<h3>{{item.title}}</h3>
<p [innerHTML]="item.desc"></p>
</div>
<div class="coupon_code">
<div class="code">
Code : {{item.code}}
</div>
<div class="copy">
</div>
</div>
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
</div>
</ng-container>
</ng-container>
</carousel>
<h4> <h4>
<div class="width50"> <div class="width50">
<span class="head">Upcoming Itinerary</span> <span class="head">Upcoming Itinerary</span>
......
src/app/home/index/index.component.ts
...@@ -7,7 +7,11 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,7 +7,11 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./index.component.scss'] styleUrls: ['./index.component.scss']
}) })
export class IndexComponent implements OnInit { export class IndexComponent implements OnInit {
items = [
{ title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
{ title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
{ title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
]
constructor() { } constructor() { }
......
src/app/home/mainmenu/mainmenu.component.html
<div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center">
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_flight.png" />
</div>
<p>FLIGHT</p>
<div class="divison_layer "></div>
</div>
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_visa.png" />
</div>
<p>VISA</p>
<div class="divison_layer "></div>
</div>
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_holiday.png" />
</div>
<p>HOLIDAY</p>
<div class="divison_layer "></div>
</div>
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_hotel.png" />
</div>
<p>Hotel</p>
</div>
</div>
<div class="main_menu_wrapper"> <div class="main_menu_wrapper">
<ul> <ul>
<li> <li>
<div class="menu_icon flight"> <div class="menu_icon flight ">
</div> </div>
<p>FLIGHT</p> <p>FLIGHT</p>
<div class="divison_layer"></div> <div class="divison_layer "></div>
</li> </li>
<li> <li>
<div class="menu_icon visa"> <div class="menu_icon visa ">
</div> </div>
<p>VISA</p> <p>VISA</p>
<div class="divison_layer"></div> <div class="divison_layer "></div>
</li> </li>
<li> <li>
<div class="menu_icon holiday"> <div class="menu_icon holiday ">
</div> </div>
<p>HOLIDAY</p> <p>HOLIDAY</p>
<div class="divison_layer"></div> <div class="divison_layer "></div>
</li> </li>
<li> <li>
<div class="menu_icon hotel"> <div class="menu_icon hotel ">
</div> </div>
<p>hotel</p> <p>hotel</p>
</li> </li>
<li> <li>
<div class="menu_icon forex"> <div class="menu_icon forex ">
</div> </div>
<p>forex</p> <p>forex</p>
</li> </li>
<li> <li>
<div class="menu_icon bus"> <div class="menu_icon bus ">
</div> </div>
<p>bus</p> <p>bus</p>
</li> </li>
<li> <li>
<div class="menu_icon inspire"> <div class="menu_icon inspire ">
</div> </div>
<p>inspire</p> <p>inspire</p>
</li> </li>
<li> <li>
<div class="menu_icon more"> <div class="menu_icon more ">
</div> </div>
<p>more</p> <p>more</p>
</li> </li>
......
src/app/home/mainmenu/mainmenu.component.scss
...@@ -94,4 +94,23 @@ $border_cm_color:#d7d8d9; ...@@ -94,4 +94,23 @@ $border_cm_color:#d7d8d9;
padding-top: 12px; padding-top: 12px;
} }
} }
}
.custMenu {
width: 35px;
height: 35px;
margin: 0 auto;
background-repeat: no-repeat;
text-align: center;
}
p {
margin: 0px;
text-align: center;
padding: 0px;
text-transform: uppercase;
font-size: 12px;
padding-top: 3px;
font-weight: 500;
padding-top: 10px;
} }
\ No newline at end of file
src/app/home/offers/offers.component.html
<div class="offer_slider">
<!-- <ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code">
<div class="code">
Code : AT 500
</div>
<div class="copy">
</div>
</div>
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code">
<div class="code">
Code : AT 500
</div>
<div class="copy">
</div>
</div>
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code">
<div class="code">
Code : AT 500
</div>
<div class="copy">
</div>
</div>
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code">
<div class="code">
Code : AT 500
</div>
<div class="copy">
</div>
</div>
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
</ngx-slick> -->
</div>
\ No newline at end of file
src/app/home/offers/offers.component.ts
import { Component, OnInit } from '@angular/core'; import { AfterViewInit, Component, ContentChildren, Directive, ElementRef, Input, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
import { CarouselDirective } from './../../directives/carousel.directive';
import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, style } from '@angular/animations';
@Directive({
selector: '.carousel-item'
})
export class CarouselItemElement {
}
@Component({ @Component({
selector: 'ati-offers', selector: 'ati-offers',
templateUrl: './offers.component.html', template: `
styleUrls: ['./offers.component.scss'] <section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
<div *ngIf="showControls" style="margin-top: 1em">
<button (click)="next()" class="btn btn-default">Next</button>
<button (click)="prev()" class="btn btn-default">Prev</button>
</div>
`,
styles: [`
ul {
list-style: none;
margin: 0;
padding: 0;
width: 6000px;
}
.carousel-wrapper {
overflow: hidden;
}
.carousel-inner {
display: flex;
}
`]
}) })
export class OffersComponent implements OnInit { export class OffersComponent {
@ContentChildren(CarouselDirective) items: QueryList<CarouselDirective>;
@ViewChildren(OffersComponent, { read: ElementRef }) private itemsElements: QueryList<ElementRef>;
@ViewChild('carousel', {static: false}) private carousel: ElementRef;
@Input() timing = '250ms ease-in';
@Input() showControls = true;
private player: AnimationPlayer;
private itemWidth: number;
private currentSlide = 0;
carouselWrapperStyle = {}
constructor() { } constructor(private builder: AnimationBuilder) { }
ngOnInit() { ngOnInit() {
} }
next() {
if (this.currentSlide + 1 === this.items.length) return;
this.currentSlide = (this.currentSlide + 1) % this.items.length;
const offset = this.currentSlide * this.itemWidth;
const myAnimation: AnimationFactory = this.buildAnimation(offset);
this.player = myAnimation.create(this.carousel.nativeElement);
this.player.play();
}
private buildAnimation(offset) {
return this.builder.build([
animate(this.timing, style({ transform: `translateX(-${offset}px)` }))
]);
}
prev() {
if (this.currentSlide === 0) return;
this.currentSlide = ((this.currentSlide - 1) + this.items.length) % this.items.length;
const offset = this.currentSlide * this.itemWidth;
const myAnimation: AnimationFactory = this.buildAnimation(offset);
this.player = myAnimation.create(this.carousel.nativeElement);
this.player.play();
}
ngAfterViewInit() {
// For some reason only here I need to add setTimeout, in my local env it's working without this.
console.log(this.itemsElements);
setTimeout(() => {
this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width;
this.carouselWrapperStyle = {
width: `${this.itemWidth}px`
}
});
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment