如何使用swiper 来做出导航栏与轮播图双控制

效果图如下

以 swiper 3.x.x 版本为例

1. swiper 控制 tab 栏

// 这里是一个初始化的swiper 当swiper 切换结束后 调用 onSlideChangeEnd 的方法，然后来更改 tab 栏的 高亮
var swiper = new Swiper('.fg-swiper', {
      nextButton: '.fg-next',
      prevButton: '.fg-prev',
      preloadImages: false,
      lazyLoading: true,
      loop: true,
      autoplay: 6000,
      onSlideChangeEnd: function(swiper) {
        $('.fg .tab li')
          .eq(swiper.realIndex)
          .addClass('active')
          .siblings()
          .removeClass('active')
      }
    })

2. tab 栏控制 swiper

// tab栏 点击后获取当前点击的下标，然后 调用 swiper 自带的 slideTo 方法，传入 index ，下标得加1
$('.fg .tab li').click(function() {
      var index = $(this).index('li')
      $(this)
        .addClass('active')
        .siblings()
        .removeClass('active')
      swiper.slideTo(index + 1)
    })