Swiper可滑动标签页如何设置中间标签为默认激活项

你使用的是Swiper 3.x版本，实现默认激活第二个标签只需要做两处修改：

• 在Swiper初始化配置中增加initialSlide参数，Swiper的slide索引从0开始计数，第二个标签对应索引值为1，设置后初始化就会默认定位到第二个标签，分页激活状态、滑动下划线都会自动同步
• 修复原有CSS中的笔误，原代码第三个标签对应的下划线位置选择器重复绑定到了第二个标签，会导致切换到第三个标签时下划线位置错误

核心修改代码 #

1. 修改Swiper初始化逻辑 #

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  slidesPerView: 1,
  paginationClickable: true,
  loop: false,
  // 新增配置：默认激活索引为1的第二个标签
  initialSlide: 1,
  paginationBulletRender: function (index, className) {
    var tabsName = ['Apps', 'Tricks', 'People'];
    if (index === tabsName.length - 1) {
      return '<span class="' + className + '">' +
      tabsName[index] + '</span>' +
      '<div class="active-mark"></div>';
    }
    return '<span class="' + className + '">' + tabsName[index] + '</span>';
  }
});

2. 修复CSS选择器错误 #

找到原有样式中重复的第二个标签选择器，把对应第三个标签的规则修正：

/* 原错误代码重复绑定了nth-of-type(2)，将选择器改为nth-of-type(3)即可 */
.swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active ~ .active-mark {
  left: 66.66%;
}

修改完成后页面加载就会默认展示中间的第二个标签，三个标签切换时下划线位置也能正常对应。

内容的提问来源于stack exchange，提问作者The Rock Developers