npm i ngx-slick-carousel

slickslider.component.html

<section class="section-padding testimonial-inner">
  <div class="container">

    <!-- Carousel for Testimonial Icons -->
    <ngx-slick-carousel #iconCarousel class="testimonial-thumbs1" [config]="iconSlickConfig" (beforeChange)="onSlideChange($event)">
      <div ngxSlickItem *ngFor="let icon of icons" class="text-center justify-content-center d-flex">
        <img alt="image-testimonial" [src]="icon" />
      </div>
    </ngx-slick-carousel>

    <!-- Carousel for Testimonials -->
    <ngx-slick-carousel #testimonialCarousel class="testimonial-top" [config]="testimonialSlickConfig" (beforeChange)="onSlideChange($event)">
      <div ngxSlickItem *ngFor="let testimonial of testimonials" class="text-desc">
        <p class="testimonial-desc h3 fw-normal text-center fst-italic"></p>
      </div>
    </ngx-slick-carousel>

    <!-- Carousel for Author Avatars -->
    <ngx-slick-carousel #authorCarousel class="testimonial-thumbs2" [config]="authorSlickConfig" (beforeChange)="onSlideChange($event)">
      <div ngxSlickItem *ngFor="let author of authors" class="slick-slide">
        <div class="testimonial-avtar d-flex justify-content-center gap-3">
          <img alt="img-testimonial" class="img-fluid center-block img-testimonial" [src]="author.image" />
          <div class="author">
            <h5 class="title mb-2"></h5>
            <span class="designation"></span>
          </div>
        </div>
      </div>
    </ngx-slick-carousel>

  </div>
</section>

slickslider.component.ts

import { Component ,ViewChild} from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlickCarouselModule } from 'ngx-slick-carousel';
@Component({
  selector: 'app-slickslider',
  standalone: true,
  imports: [CommonModule,SlickCarouselModule],
  templateUrl: './slickslider.component.html',
  styles: ``
})
export class SlicksliderComponent {

  @ViewChild('iconCarousel', { static: false }) iconCarousel: any;
  @ViewChild('testimonialCarousel', { static: false }) testimonialCarousel: any;
  @ViewChild('authorCarousel', { static: false }) authorCarousel: any;
  currentIndex = 0;
  iconSlickConfig = {
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: true,
    responsive: [
      { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1 } },
      { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } }
    ]
  };

  testimonialSlickConfig = {
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    // autoplay: true,
    autoplaySpeed: 3000,
  };

  authorSlickConfig = {
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    centerMode: true,
    centerPadding: '0px',
    responsive: [
      { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, centerMode: true, centerPadding: '10px' } },
      { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, centerMode: true, centerPadding: '10px' } }
    ]
  };


  onSlideChange(event: { slick: any; currentSlide: number; nextSlide: number }) {
    this.currentIndex = event.nextSlide;
    this.updateCarousels();
  }

  updateCarousels() {
    this.iconCarousel.slickGoTo(this.currentIndex);
    this.testimonialCarousel.slickGoTo(this.currentIndex);
    this.authorCarousel.slickGoTo(this.currentIndex);
  }

  // Sample icons
  icons = [
    'assets/images/testimonial/testi-icon-05.png',
    'assets/images/testimonial/testi-icon-03.png',
    'assets/images/testimonial/testi-icon-04.png',
    'assets/images/testimonial/testi-icon-02.png',
    'assets/images/testimonial/testi-icon-01.png',
    'assets/images/testimonial/testi-icon-07.png',
  ];

  // Sample testimonials
  testimonials = [
    {
      text: "Velocity is crucial in marketing. The campaigns we can put together, the more pages we can create, the bigger we feel, and the more touch points we have with customers."
    },
    {
      text: "Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley."
    },
    {
      text: "Dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown."
    },
    {
      text: "Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer."
    }
  ];

  // Sample authors
  authors = [
    { name: "Jason Roger", designation: "Designer", image: "assets/images/testimonial/author-5.png" },
    { name: "Jennifer Walker", designation: "Designer", image: "assets/images/testimonial/author-1.png" },
    { name: "JD Scot", designation: "Designer", image: "assets/images/testimonial/author-4.png" },
    { name: "Fitt Morgan", designation: "Designer", image: "assets/images/testimonial/author-3.png" },
    { name: "Nik Jorden", designation: "Designer", image: "assets/images/testimonial/author-2.png" },
    { name: "Julia Cooper", designation: "Designer", image: "assets/images/testimonial/author-6.png" }
  ];
}

You can call slick-slider component wherever slick-slider has to show. eg: /src/app/views/home/qloud-storage

<app-slickslider></app-slickslider>