How to create carousel in angular 8 using Angular Material?


The first image is what I am getting currently and second is what I actually want


enter image description here


enter image description here

<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()" >

           <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 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>

enter image description here


            **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": [
            "scripts": ["./node_modules/jquery/dist/jquery.min.js",

           **4.** `Update app.module.ts file`<br>
                import { OwlModule } from 'ngx-owl-carousel';
                // Add OwlModule to imports at below section
                imports: [BrowserModule, OwlModule],

5. Update app.component.ts file
mySlideImages = [‘../assets/images/image1.jpg’,’../assets/images/image2.jpeg’,’../assets/images/image3.jpg’];
mySlideOptions={items: 1, dots: true, nav: true};

6. Update app.component.html file

For details you can follow this link Carousel

Answered By – Rocky

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.