La première image est ce que je reçois actuellement et la seconde est ce que je veux réellement
D'abord: -
Seconde:-
<mat-card class="carousel-data">
<mat-grid-list cols="2" rowHeight="30px" class="carousel-data" *ngFor="let data of resource let i = index;" (click)="showdata()" >
<mat-grid-tile>
<img class="m-t-0 m-b-0 "[src]="data.img" alt="" width="24">
<div class="prof-left" style="margin-left: 10px;">
<p class="m-t-0 m-b-0 bank-name">{{ data.bank_name}}</p>
<p class="m-t-0 m-b-0 bank-account">{{ data.account_number }}</p>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="prof-right">
<p class="m-t-0 m-b-0 total-bal">Total Bal</p>
<p class="m-t-0 m-b-0 total-amount">{{ data.amount }}</p>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-card>
**Steps Needs to follow to achieve Carousel:-**
1. ng new owl-carousel
2. npm install ngx-owl-carousel owl.carousel jquery --save
3. Add library files in angular.json
"styles": [
"src/styles.css",
"./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
"./node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
],
"scripts": ["./node_modules/jquery/dist/jquery.min.js",
"./node_modules/owl.carousel/dist/owl.carousel.min.js"]
},
<br><br>
**4.** `Update app.module.ts file`<br>
import { OwlModule } from 'ngx-owl-carousel';
// Add OwlModule to imports at below section
imports: [BrowserModule, OwlModule],
<br><br>
5. Update app.component.ts file
mySlideImages = ['../assets/images/image1.jpg','../assets/images/image2.jpeg','../assets/images/image3.jpg'];
mySlideOptions = {items: 1, points: true, nav: true};
6. Update app.component.html file
Pour plus de détails, vous pouvez suivre ce lien Carrousel
Vous pouvez utiliser OWl Carousel pour cela quelque chose comme
<div class="owl-carousel owl-theme">
<div class="item" *ngFor="let data of resource let i = index;">
<mat-grid-list cols="2" rowHeight="30px" class="carousel-data" (click)="showdata()" >
<mat-grid-tile>
<img class="m-t-0 m-b-0 "[src]="data.img" alt="" width="24">
<div class="prof-left" style="margin-left: 10px;">
<p class="m-t-0 m-b-0 bank-name">{{ data.bank_name}}</p>
<p class="m-t-0 m-b-0 bank-account">{{ data.account_number }}</p>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="prof-right">
<p class="m-t-0 m-b-0 total-bal">Total Bal</p>
<p class="m-t-0 m-b-0 total-amount">{{ data.amount }}</p>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
</div>
dans votre composant
ngAfterViewInit(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
}
Vérifiez cette démo pour voir comment l'utiliser avec angulaire
notez que vous devez inclure le fichier de carrousel jquery et owl pour le faire fonctionner
Ou vous pouvez utiliser ngx-owl-carousel
Si vous avez déjà inclus, vous pouvez essayer bootstrap carrousel comme https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
ou d'autres dépendances comme celle qui est vraiment facile et les étapes sont mentionnées dans ce lien
Exécuter fil ajouter ngx-owl-carousel-o ou npm installer ngx-owl-carousel-o ou ng ajouter ngx-owl-carousel-o.
Ajoutez des styles (une de ces variantes). src/styles.sass
ou src/styles.scss
:
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';
Import RoutingModule
et Routes dans AppModule
sauf s'ils sont importés.
Import BrowserAnimationsModule
dans AppModule
sauf s'il est importé.
Import CarouselModule
dans un module qui déclare un composant destiné à avoir un carrousel.
import { CarouselModule } from 'ngx-owl-carousel-o';
@NgModule({
imports: [ CarouselModule ],
declarations: [ CarouselHolderComponent ]
})
export class SomeModule { }
Ajoutez au composant nécessaire CustomOptions ou nommez l'objet de différentes manières avec des options pour le carrousel:
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
selector: '....',
templateUrl: 'carousel-holder.component.html'
})
export class CarouselHolderComponent {
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 700,
navText: ['', ''],
responsive: {
0: {
items: 1
},
400: {
items: 2
},
740: {
items: 3
},
940: {
items: 4
}
},
nav: true
}
}
Add html-markup to the template of the component (in this case, add it to carousel-holder.component.html):
<div>Some tags before</div>
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide>Slide 1</ng-template>
<ng-template carouselSlide>Slide 2</ng-template>
<ng-template carouselSlide>Slide 3</ng-template>
</owl-carousel-o>
<div>Some tags after</div>
ou
<div>Some tags before</div>
<owl-carousel-o [options]="customOptions">
<ng-container *ngFor="let slide of slidesStore">
<ng-template carouselSlide [id]="slide.id">
<img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
</ng-template>
</ng-container>
</owl-carousel-o>
<div>Some tags after</div>