<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
        <div class="swiper-slide">slider4</div>
        <div class="swiper-slide">slider5</div>
        <div class="swiper-slide">slider6</div>
        <div class="swiper-slide">slider7</div>
        <div class="swiper-slide">slider8</div>
        <div class="swiper-slide">slider9</div>
    </div>
</div>

var mySwiper = new Swiper(‘.swiper-container‘, {
    //autoplay: true, //可選選項，自動滑動
    loop:true,//設置 active slide 居中後，會有左右留白現象，添加此會讓未尾的導航補齊前後空白
    slideToClickedSlide: true,//設置為true則點擊slide會過渡到這個slide。
    slidesPerView: 5,
    centeredSlides: true,//設定為true時，active slide會居中，而不是默認狀態下的居左。
    spaceBetween: 10,
    slidesOffsetBefore: 
 
0,
    slidesOffsetAfter: 0,
})

$(‘.swiper-container .swiper-slide‘).on("click",function(){
    //mySwiper.activeIndex   過渡到的 slide 位置 
    mySwiper.slideTo(mySwiper.activeIndex, 1000, false);//切換到指定slide，速度為1秒
    
})

swiper 導航有多個，被點擊的項居中顯示。