carousel

bash=>
npm install ngx-owl-carousel-o

app.module.ts=>
import { CarouselModule } from 'ngx-owl-carousel-o';
imports: [BrowserModule, CarouselModule],

html=>
<owl-carousel-o [options]="carouselOptions">
          <ng-template carouselSlide *ngFor="let card of teamCards">
            <div class="card">
              <img src="{{ card.img }}" alt="" />
              <div class="card-body">
                <h4>{{ card.name }}</h4>
                <p>{{ card.role }}</p>
                <div class="design-bottom right"></div>
                <div class="design-bottom left"></div>
              </div>
            </div>
          </ng-template>
        </owl-carousel-o>

ts=>
export class MeetTheTeamComponent {
  // Define the options for the carousel
  carouselOptions = {
     loop: true,
     margin: 10,
    nav: true,
    dots: true,
    autoplay: true,            
    autoplayTimeout: 3000,     
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 4
      }
    }
  };

  // Dummy data for cards (replace with real data)
  teamCards = [
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' },
    { img: '/images/team-4.png', name: 'Sabrina Boby', role: 'Founder' }
  ];
}