52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
|
import {AfterContentInit, Component, ContentChildren, QueryList} from "@angular/core";
|
||
|
import {SlideComponent} from "./slide.component";
|
||
|
|
||
|
@Component({
|
||
|
selector: 'fp-slider',
|
||
|
template: `
|
||
|
<section (wheel)="onWheel($event)">
|
||
|
<ng-content></ng-content>
|
||
|
</section>`,
|
||
|
styleUrls: ['full-page-slider.component.css']
|
||
|
})
|
||
|
export class FullPageSliderComponent implements AfterContentInit {
|
||
|
|
||
|
@ContentChildren(SlideComponent) slides: QueryList<SlideComponent>;
|
||
|
|
||
|
public animate: boolean = false;
|
||
|
public state = 0;
|
||
|
|
||
|
ngAfterContentInit() {
|
||
|
this.setSlides();
|
||
|
this.state = 1;
|
||
|
}
|
||
|
|
||
|
setSlides(state = 1) {
|
||
|
this.slides.forEach((slide, index) => {
|
||
|
slide.state = state;
|
||
|
slide.y = -50 + (index + 1)*200 - state*200;
|
||
|
});
|
||
|
}
|
||
|
|
||
|
onWheel(event) {
|
||
|
if (!this.animate) {
|
||
|
this.animate = true;
|
||
|
if (event.deltaY > 0 && (this.state < this.slides.length)) {
|
||
|
this.state++;
|
||
|
this.setSlides(this.state);
|
||
|
setTimeout(() => {
|
||
|
this.animate = false;
|
||
|
}, 1000);
|
||
|
} else if (event.deltaY < 0 && (this.state !== 1)) {
|
||
|
this.state--;
|
||
|
this.setSlides(this.state);
|
||
|
setTimeout(() => {
|
||
|
this.animate = false;
|
||
|
}, 1000);
|
||
|
} else {
|
||
|
this.animate = false;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|