swiper做导航栏时自动跳转至对应分类的代码

给客户做一个zblog模板，手机端需要实现一个滑动导航栏的需求。分为上下两部分，一级分类显示在上面当导航栏，下面则显示该分类的子分类，左右滑动可切换。

于是准备直接用swiper实现，直接new了两个Swiper对象，然后绑定切换，这个效果Swiper官网有案例的。

然后出现了一个问题，当打开列表页的时候导航栏需要切换到当前分类并高亮显示，底部也要切换到对应的子分类模块显示。

尝试了一些方法后用“slideTo”这个方法解决了，分享下思路过程和代码。

首先了解下“slideTo”这个方法的参数，官方文档说明：https://www.swiper.com.cn/api/methods/109.html；

思路大概就是循环导航栏swiper，对比哪一个跟当前页面的链接是相同的，然后获取它的“data-swiper-slide-index”值；

然后用“slideTo”方法，把上面获取到值赋给子分类模块的swiper，即可实现需求。

代码：

导航栏swiper的class为“gallery-thumbs”，子分类模块swiper的class为“galleryTop”。js代码如下：

var surl = location.href;
$(".gallery-thumbs .swiper-slide a").each(function() {
    if ($(this).attr("href") == surl) {
        var liebs = $(this).parent().attr("data-swiper-slide-index");
        var liebss = liebs - 1;
        galleryTop.slideTo(liebss,0, false);
    }
});

最后总结下，swiper确实很强大。