The problem of Angular using the built-in method of Swiper plug-in to report an error

<div class="navTab swiper-container" id="nav">
            <ul class="nav-ul swiper-wrapper">
                <li class="nav-item swiper-slide"></li>
                <li class="nav-item swiper-slide"></li>
                <li class="nav-item swiper-slide"></li>
                <li class="nav-item swiper-slide"></li>
                <li class="nav-item swiper-slide"></li>
                <li class="nav-item swiper-slide"></li>
            </ul>
        </div>
import { Component, OnInit } from "@angular/core";

declare var $: any;
declare var Swiper: any;

@Component({
    selector: "navTab",
    templateUrl: "./navTab.component.html",
    styleUrls: ["./navTab.component.css"]
})
export class navTabComponent implements OnInit {
    constructor() {

    }
    ngOnInit() {
        $(".nav-ul>.nav-item").click(function() {
            var Index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
        });
        var mySwiper = new Swiper("-sharpnav", {
            freeMode: true,
            freeModeMomentumRatio: 0.5,
            slidesPerView: "auto",
        });
//        swiperWidth = mySwiper.container[0].clientWidth;
//        maxTranslate = mySwiper.maxTranslate();
//        maxWidth = -maxTranslate + swiperWidth / 2
//        mySwiper.on("tap", function(swiper, e) {
//            slide = swiper.slides[swiper.clickedIndex];
//            slideLeft = slide.offsetLeft;
//            slideWidth = slide.clientWidth;
//            slideCenter = slideLeft + slideWidth / 2;
//            mySwiper.setWrapperTransition(300)
//            if(slideCenter < swiperWidth / 2) {
//                mySwiper.setWrapperTranslate(0);
//            } else if(slideCenter > maxWidth) {
//                mySwiper.setWrapperTranslate(maxTranslate);
//            } else {
//                nowTlanslate = slideCenter - swiperWidth / 2;
//                mySwiper.setWrapperTranslate(-nowTlanslate);
//            }
//        });
    }
}

clipboard.png

< H2 > I will report an error when I use the built-in method of Swiper plug-in in angular. I would like to ask you, how to use < / H2 > correctly?
Mar.22,2021

has not used this plug-in, but you can refer to https://blog.csdn.net/wgp1573.
. I see if your global variable declaration is in the wrong position?
and then did you introduce it properly?

Menu