How to create carousel in angular 8 using Angular Material?

Issue

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

First:-

enter image description here

Second:-

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

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

enter image description here

Solution

            **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, 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.