I try to add swiperjs into my angular 11 project but showing 'swiper' is not a known element:

I want to use [swiperjs][1] in my angular project. So read their documentation and did all steps they told me to do. but it shows an error saying 'swiper' is not a known element: 1. If 'swiper' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this here I did so far

1. npm i swiper,
2. import { SwiperModule } from 'swiper/angular' to app.module;
3. add ./node_modules/swiper/swiper-bundle.css" to angular.json,

My HTML:

<swiper >
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
</swiper>

ts file:

import Swiper, { Navigation, Pagination } from 'swiper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'gameClan';
  swiper = new Swiper('.swiper', {
    speed: 400,
    spaceBetween: 100,
  });
}

where did I make mistake? i uninstall and reinstall this package two times but the problem remains the same [1]: https://swiperjs.com/angular