I have two custom button Next and Previous Functionality but its not working

[PradipMaharana]

<div mat-dialog-content style="border: 1px solid #dcdcdc;">
        <div class="demo-carousel">
            <mat-carousel
              #matCarousel
              [timings]="timings"
              [autoplay]="false"
              [interval]="interval"
              [loop]="false"
              [hideArrows]="hideArrows"
              [hideIndicators]="hideIndicators"
              [color]="color"
              [maxWidth]="maxWidth"
              [proportion]="proportion"
              [useKeyboard]="useKeyboard"
              [useMouseWheel]="useMouseWheel"
              [orientation]="orientation"
              [slides]="slides"
              (change)="onChange($event)">
      
              <mat-carousel-slide
                #matCarouselSlide
                *ngFor="let slide of slidesList; let i = index"
                image="{{slidesListDtls[i].image}}"
                [overlayColor]="overlayColor"
                [hideOverlay]="hideOverlay">
                <ng-container *ngIf="showContent">
                  <div
                    style="width: 85%; text-align: center; margin-left: 8%; height: 290%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    
                    
                    <h5><strong> {{slidesListDtls[i].title}}</strong></h5>
                    <p> {{slidesListDtls[i].description}}
                    </p>
                  </div>
                </ng-container>
              </mat-carousel-slide>
            </mat-carousel>
          </div>
        </div>
       
        <div mat-dialog-actions>
          <div style="width: 100%; ">
            <div style="width: 20%; float: left;">
              <button mat-raised-button class="skipButton" [mat-dialog-close]="true" tabindex="-1">Skip</button></div>
            <div style="width: 70%; float: right;">
              
              <button mat-raised-button color="primary"  class="nextButton" (click)="next()" tabindex="2">Next</button>

              
              <button mat-raised-button class="previousButton" tabindex="1"><mat-icon _ngcontent-c13="" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">arrow_forward</mat-icon></button>
            </div>
          </div>
        </div>