src/app/shared/components/product-slider/product-slider.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-product-slider |
| styleUrls | product-slider.component.scss |
| templateUrl | ./product-slider.component.html |
Properties |
|
Methods |
Inputs |
constructor()
|
productsList
|
Type:
Default value: |
showRating
|
Type: |
| moveLeft |
moveLeft()
|
|
Returns :
void
|
| moveRight |
moveRight()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public carouselOne |
carouselOne:
|
Type : NguCarousel
|
import { NguCarousel } from '@ngu/carousel';
import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-product-slider',
templateUrl: './product-slider.component.html',
styleUrls: ['./product-slider.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductSliderComponent implements OnInit {
@Input() productsList = new Array(10);
public carouselOne: NguCarousel;
@Input() showRating: boolean;
constructor() {
this.carouselOne = {
grid: { xs: 1, sm: 1, md: 2, lg: 5, all: 0 },
slide: 2,
speed: 400,
animation: 'lazy',
point: {
visible: false
},
load: 2,
touch: true,
easing: 'ease-in',
custom: 'banner'
}
}
ngOnInit() {
}
moveLeft() {
}
moveRight() {
}
}
<section class="mt-3" *ngIf="productsList?.length">
<ngu-carousel [inputs]="carouselOne">
<ngu-item class="col-6 col-sm-4 col-md-3 col-lg-2 product-box m-1 card p-1" *ngFor="let product of productsList" NguCarouselItem>
<app-inner-product [product]="product" [showRating]="showRating">
</app-inner-product>
</ngu-item>
<button NguCarouselPrev class='leftRs d-none d-sm-block'></button>
<button NguCarouselNext class='rightRs d-none d-sm-block'></button>
</ngu-carousel>
<hr>
</section>