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

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演示

我见过很多在滑块中使用i++的“索引”，但不知道如何采用或创建这种方法。这对我的案子是个好主意吗？

Answer 1

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

工作演示

我想到了用要点“用jQuery制作一个简单的图像滑块”