如何在某个滑块中同步两个列表的状态？

Question

我创造了一个由图标引导的水平旅程。之后每个图标都会包含一些信息。

通过点击箭头，访问者可以指导自己完成整个旅程：

如何同步图像内部的图标和下方的按钮，同时使下面的按钮也可以点击？

目前，我使用.next()和.prev()触发箭头导航：

var nextIcon = function() {
  var windowWidth = $('#image-holder').width();
  var current = $('#image').find('.current');
  var next = current.next();
  current.removeClass('current');
  next.addClass('current');
  var offsetLeft = - (next.position().left) + (windowWidth / 2);
  $('#image').css({"margin-left": offsetLeft});
}

对于下面的按钮不起作用，我可以在点击时从第一个图标跳到第四个图标。

CODEPEN DEMO

我见过很多＆＃34;索引＆＃34;在滑块内使用i++，但不知道如何采用或创建它。对我来说这是个好主意吗？

Answer 1

我通过索引我的元素使用类似滑块的方法解决了它。使用jQuery .eq()可以很容易地浏览我的元素。

Working demo

我使用Sitepoints "Making a simple image slider with jQuery"

得到了这个想法