使用swiper js创建历史时间表，每年有多张幻灯片

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。 ste正在寻找来自信誉良好的来源的答案。

我正在使用swiper JS框架以html和JS制作历史性时间表。它从html计数滑动的幻灯片的数量，并从中获取year属性以产生分页。问题是如果我有同一年的多张幻灯片，则单击时会错误地转到错误的年份-这是html的示例：

<div year="2013" class="swiper-slide">content here</div>
<div year="2013" class="swiper-slide">content here</div>
<div year="2015" class="swiper-slide">content here</div>

分页本来是同一年的多次输出，从技术上讲可以正常工作，但是我不想在时间轴上多次输出同一年（​​它只需要每年1次分页，但是可以左右使用按钮以滚动浏览所有内容，等等。

我添加了一个修复程序，仅输出唯一的年份，它将以数组的形式返回当前年份并进行过滤。这是下面的代码：

  var tmpYears = [];

  $('.cb-timeline .swiper-slide').each(function(i) {
    tmpYears.push($(this).attr('year'))
  });

  var uniqueYears = tmpYears.filter(function(elem, index, self) {
    return index === self.indexOf(elem);
});

  var timelineYears = uniqueYears;

并更改了swiperjs的初始分页呈现，以便仅在存在索引的情况下才输出年份：

      renderBullet: function(index, className) {
        if(timelineYears[index]) {
          return '<span class="' + className + '"><span class="pagination-year">' + timelineYears[index] + '</span></span>';

        } else {
          return '';
        }

        // console.log(timelineYears);
      },

但是现在左右滑动时，如果有1张幻灯片（即2013年），则分页将在滑动时跳至下一张]

在添加以下内容之前，这是我的Codepen带有原型的更好示例：

https://codepen.io/nolimit966/pen/mdVVwJm

如您所见，它输出多年。

任何人都可以帮助我了解如何通过分页和导航功能实现一年多张幻灯片以及每年一张多张幻灯片的方式吗？

谢谢

我正在使用swiper JS框架以html和JS制作历史性时间表。它从html计数滑动的幻灯片的数量，并从中获取year属性以产生分页。 ...

Answer 1

您可以嵌套swiperjs。在2011年的幻灯片中，我添加了一个嵌套的swiperjs容器。因此，现在顶部容器具有top类，而嵌套容器具有nested类。这是为了启动嵌套元素的滑块。