控制Swiper切换到指定swiper-slide

背景：

    移动端产品列表页，产品类别横向滚动展示，如下图选中 "类别4"跳转加载新数据，swiper滚动一定距离使"类别4"居中显示。

html:

 <div class="product-menu clear swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide product-menu-list" style="width: auto!important;">
            <a href="/product/index.html?catid=2" data-catid="0">全部</a>
        </div>
        <div class="swiper-slide product-menu-list" style="width: auto!important;">
            <a href="/product/index.html?catid=3" data-catid="0">类别1</a>
        </div>
        <div class="swiper-slide product-menu-list" style="width: auto!important;">
            <a href="/product/index.html?catid=4" data-catid="0">类别2</a>
        </div>
        <div class="swiper-slide product-menu-list" style="width: auto!important;">
            <a href="/product/index.html?catid=5" data-catid="0">类别3</a>
        </div>
        <div class="swiper-slide product-menu-list" style="width: auto!important;">
            <a href="/product/index.html?catid=6" data-catid="0">类别4</a>
        </div>
    </div>
 </div>

js:

   window.onload = function() {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                freeMode:true,
            });
            var index = "{$index}"; // index为指定将要切换到的slide的索引
            swiper.slideTo(index, 100, false);     
        };

ps: 可参考官方文档 https://www.swiper.com.cn/api/methods/109.html