Swiper in Angular as WebComponent

npm install swiper

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { register } from 'swiper/element/bundle';

register(); 

@Component({
  selector: 'app-news',
  imports: [],
  templateUrl: './news.component.html',
  styleUrl: './news.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA] 
})
export class NewsComponent {}

<swiper-container
  slides-per-view="1"
  space-between="10"
  pagination="true"
  navigation="true"
  loop="true"
>
  <swiper-slide>
    <img src="assets/images/slide1.jpg" alt="Slide 1" />
  </swiper-slide>
  <swiper-slide>
    <img src="assets/images/slide2.jpg" alt="Slide 2" />
  </swiper-slide>
  <swiper-slide>
    <img src="assets/images/slide3.jpg" alt="Slide 3" />
  </swiper-slide>
</swiper-container>

swiper-container {
    width: 100%;
    height: 400px;
}
  
swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    background: #f5f5f5;
}