swiper点击跳转可滚动的导航菜单以及初始化

html部分：

    <div id="topNav" class="swiper-container swiper-container-horizontal swiper-container-free-mode">

        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-281px, 0px, 0px);">

            <a class="swiper-slide active" onclick="window.location.href='/main/detail/22/1/0'">

                    <span>

                        <img src="/uploads/20170927/d6620c440c1110c2b97555eb60302698.jpg">

                    </span>

                    推荐

                </a>

                <a class="swiper-slide" onclick="window.location.href='/main/detail/22/2/0'">

                    <span>

                        <img src="/uploads/20170927/273b2bdd4495d7b9f5555672caec37e8.jpg">

                    </span>

                    最新

                </a>

                <a class="swiper-slide" onclick="window.location.href='/main/detail/22/3/0'">

                    <span>

                        <img src="/uploads/20170927/5bef359383128779d1aed1d5dc496093.jpg">

                    </span>

                    清仓

                </a>

                        <a class="swiper-slide swiper-slide-prev" onclick="window.location.href='/main/detail/22/314/0'">

                    <span>

                        <img src="/uploads/20170928/8d9ee564b2f8a77f302fa683a79ae272.jpg">

                    </span>

                    BAUER                </a>

                        <a class="swiper-slide swiper-slide-active" onclick="window.location.href='/main/detail/22/309/0'">

                    <span>

                        <img src="/uploads/20170927/cd2663b5f35ec8bca4e658cce3e78436.jpg">

                    </span>

                    CCM                </a>

                        <a class="swiper-slide swiper-slide-next" onclick="window.location.href='/main/detail/22/315/0'">

                    <span>

                        <img src="/uploads/20170928/e10e99f4922f00327092bd2bd638835f.jpg">

                    </span>

                    GARF                </a>

                        <a class="swiper-slide" onclick="window.location.href='/main/detail/22/321/0'">

                    <span>

                        <img src="/uploads/20170928/e42f9f67d49981372bc15aa137a88773.png">

                    </span>

                    花样                </a>

                        <a class="swiper-slide" onclick="window.location.href='/main/detail/22/316/0'">

                    <span>

                        <img src="/uploads/20170928/fceec9f4e3235283c47b13b116c4a7f1.jpg">

                    </span>

                    守门员                </a>

                        <a class="swiper-slide" onclick="window.location.href='/main/detail/22/317/0'">

                    <span>

                        <img src="/uploads/20170928/ad0d6fd771548abd95ab109c3014a766.jpg">

                    </span>

                    冰鞋配件                </a>

                        <a class="swiper-slide" onclick="window.location.href='/main/detail/22/363/0'">

                    <span>

                        <img src="/uploads/20170928/40304a25f33f12b46e0d9e668b459616.jpg">

                    </span>

                    其他品牌                </a>

        

        </div>

    </div>

css部分

    

#topNav{

height: 1.04rem;

margin-top: 1rem;

border-bottom:.01rem solid #DDDDDD;

}

#topNav .swiper-slide {

/*font-family: PingFangMedium;*/

letter-spacing:0px;

width:1.26rem;

padding-top: .1rem;

text-align:center;

font-size: .2rem;

}

#topNav .swiper-slide span{

transition:all .3s ease;

display:block;

color:#878787;

height:.583rem;

vertical-align: middle;

/*margin-bottom: .1rem;*/

}

#topNav .active{

border-bottom: .04rem solid #F5B800;

}

#topNav .swiper-slide img{

display: inline-block;

margin:0 auto;

vertical-align: middle;

max-height:.583rem;

}

swiper初始化

    

var mySwiper = new Swiper('#topNav', {

freeMode: true,

freeModeMomentumRatio: 0.5,

slidesPerView: 'auto',

});

swiperWidth = mySwiper.container[0].clientWidth

maxTranslate = mySwiper.maxTranslate();

maxWidth = -maxTranslate + swiperWidth / 2

//$(".swiper-container").on('touchstart', function(e) {

//e.preventDefault()

//})

//mySwiper.on('tap', function(swiper, e) {

//e.preventDefault()

slide = $("#topNav .active")[0]

slideLeft = slide.offsetLeft

slideWidth = slide.clientWidth

slideCenter = slideLeft + slideWidth / 2

// 被点击slide的中心点

console.log(slide);

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)

}