<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);
//            }
//        });
    }
}