Production release November 2023 #20
|
@ -17,7 +17,7 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
|
||||||
@Input()
|
@Input()
|
||||||
type: 'slider' | 'nav' = null;
|
type: 'slider' | 'nav' = null;
|
||||||
@Input()
|
@Input()
|
||||||
animation = 'uk-animation-fade';
|
animation = null;
|
||||||
@ContentChildren(SliderItemComponent) items: QueryList<SliderItemComponent>;
|
@ContentChildren(SliderItemComponent) items: QueryList<SliderItemComponent>;
|
||||||
@ContentChildren(SliderNavItemComponent) navItems: QueryList<SliderNavItemComponent>;
|
@ContentChildren(SliderNavItemComponent) navItems: QueryList<SliderNavItemComponent>;
|
||||||
public isMobile: boolean;
|
public isMobile: boolean;
|
||||||
|
@ -35,12 +35,14 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterContentInit() {
|
ngAfterContentInit() {
|
||||||
|
if (this.animation) {
|
||||||
this.slides.forEach(slide => {
|
this.slides.forEach(slide => {
|
||||||
slide.init(this.animation);
|
slide.init(this.animation);
|
||||||
});
|
});
|
||||||
this.navItems.forEach(slide => {
|
this.navItems.forEach(slide => {
|
||||||
slide.init(this.animation);
|
slide.init(this.animation);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
|
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
|
||||||
this.isMobile = isMobile;
|
this.isMobile = isMobile;
|
||||||
}));
|
}));
|
||||||
|
@ -56,9 +58,7 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
|
||||||
if (this.type === 'nav') {
|
if (this.type === 'nav') {
|
||||||
let slides = this.navItems;
|
let slides = this.navItems;
|
||||||
for (let i = 0; i < slides.length; i++) {
|
for (let i = 0; i < slides.length; i++) {
|
||||||
if (this.isMobile) {
|
slides.get(i).setActive(!this.isMobile || (slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time)));
|
||||||
slides.get(i).setActive(slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time));
|
|
||||||
}
|
|
||||||
slides.get(i).active = slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time);
|
slides.get(i).active = slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export class Stage {
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'slider-container',
|
selector: 'slider-container',
|
||||||
template: `
|
template: `
|
||||||
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-child-width-1-1" [ngClass]="'uk-child-width-1-' + sliders?.length + '@s'" uk-grid>
|
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-flex-between uk-child-width-1-1" [ngClass]="'uk-child-width-1-' + sliders?.length + '@m'" uk-grid>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="navigation === 'progress' && stages.length > 0" class="uk-flex uk-flex-center uk-margin-large-top">
|
<div *ngIf="navigation === 'progress' && stages.length > 0" class="uk-flex uk-flex-center uk-margin-large-top">
|
||||||
|
|
Loading…
Reference in New Issue