如何为MomentumSlider滑块的标题变量数组添加对应独立跳转链接

算力阿峰

2026-4-29

解决方案

要实现每个滑块标题对应独立跳转链接，你只需要调整MomentumSlider配置中的rangeContent函数，同时新增一个和titles数组一一对应的链接数组即可，具体步骤如下：

1. 新增对应链接数组

首先定义一个和titles顺序完全匹配的链接数组，每个位置的链接对应titles中同位置的标题：

var titles = [ 'namefayee', 'Champ App', 'Shirt Design', 'Post NL' ];
// 替换成你实际需要跳转的目标网站链接
var caseLinks = [
  'https://your-first-link.com',
  'https://your-second-link.com',
  'https://your-third-link.com',
  'https://your-fourth-link.com'
];

2. 修改`rangeContent`函数

rangeContent函数会自动接收当前滑块的索引值（对应你配置的range: [0,3]，索引从0到3），我们可以利用这个索引来动态生成对应标题和链接的<a>标签：

var msLinks = new MomentumSlider({ 
  el: slidersContainer, 
  cssClass: 'ms--links', 
  range: [0, 3], 
  // 动态生成对应标题和链接的a标签
  rangeContent: function (index) { 
    // 加入边界判断，避免数组越界报错
    if (index >= 0 && index < titles.length && index < caseLinks.length) {
      // 使用模板字符串拼接HTML，更简洁易读
      return `<a class="ms-slide__link" href="${caseLinks[index]}" target="_blank">${titles[index]}</a>`;
    }
    // 索引越界时的默认 fallback
    return '<a class="ms-slide__link">View Case</a>';
  }, 
  vertical: true, 
  interactive: false 
});