Javascript 使用swiper js创建一个历史时间线，每年有多张幻灯片

我正在使用Swiper JS，我正在努力找到一种方法，可以从分页中删除重复项。我希望每年都有一张幻灯片，里面有内容，但在特定年份也有多张幻灯片——但只为它写一个页码（导航/滑动工作）

因此，如果幻灯片的位置：

1989、1990、1992、1992、1992

然后分页将显示为：

1989、1990、1992

（此外，滑动和左/右箭头将与此配合使用，并滚动浏览所有幻灯片，不丢失任何幻灯片，但每次重复都保持在幻灯片上）

内容
内容
内容
内容
内容
内容

var mySwiper=new Swiper（“.Swiper container”{
//如果我们需要分页
分页：{
el:“.swiper分页”，
可点击：正确，
renderBullet:函数（索引、类名）{
返回“”+（菜单[索引]）+“”；
},
},
//导航箭头
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
})

下面是一个重复年份的清晰示例：

到目前为止我已经尝试过的事情：

找到重复的年份并将其从菜单中删除-现在的主要问题是跳过了该幻灯片

删除重复的dom分页元素-这在滑动时看起来会被破坏，因为有一点没有分页突出显示

---

有人能帮我理解我是如何做到这一点的吗？

您可以通过实现自己的逻辑来实现这一点。这意味着您可以处理对上一个、下一个和年份元素的单击

您使用的版本很旧，这就是我在

.timeline

元素上使用

触发器的原因。新版本的swiperjs具有
slideChange
事件，您可以利用该事件实现相同的结果

你可以在这里找到小提琴：

下面是一个例子：


var年数=[]；
设slideIndex=0；
设currentSlide=0；
var timelineSwiper=新的Swiper（'.timeline.Swiper容器'{
方向：'垂直'，
循环：false，
速度：1600，
分页：'.swiper分页'，
分页BulletRender:函数（swiper、索引、类名）{
设el=swiper.slides[索引]；
var yearValue=el.getAttribute（'year'）；
如果（！年包括（年值））{
//将数据属性设置为幻灯片以链接到年份元素
el.setAttribute（“数据父项”，索引）；
//在下一次迭代中使用此变量对类似幻灯片进行分组
slideIndex=指数；
年。推送（年值）；
让clsName=index==0？“swiper分页项目符号自定义swiper分页项目符号自定义活动”：“swiper分页项目符号自定义”；
返回`${yearValue}`；
}
el.setAttribute（“数据父对象”，slideIndex）；
返回“”；
},
分页可点击：false，
断点：{
768: {
方向：'水平'，
}
}
});
//如果未到达滑块末端，则单击下一个箭头
$（“.swiper按钮下一步”）。在（“单击”，函数（）{
如果（！timelineSwiper.isEnd）{
timelineSwiper.slideTo（++currentSlide）；
$（“.timeline”）.trigger（“slideChange”）；
}
});
//如果未到达滑块的开头，则单击上一个箭头
$（.swiper button prev”）。在（“单击”，函数（）上{
如果（！timelineSwiper.isBeging）{
timelineSwiper.slideTo（--currentSlide）；
$（“.timeline”）.trigger（“slideChange”）；
}
});
//处理点击年份
$（“.swiper分页范围”）。在（“单击”，函数（）{
设el=$（此）；
设pageIndex=el.attr（“数据索引”）；
timelineSwiper.slideTo（页面索引）；
$（“.timeline”）.trigger（“slideChange”）；
当前幻灯片=页面索引；
});
//幻灯片更改时，将活动类移动到相关元素
$（“.timeline”）。在（“slideChange”，函数（）上{
$（“.swiper分页项目符号自定义活动”）.removeClass（“swiper分页项目符号自定义活动”）；
让active=timelineSwiper.activeIndex；
让index=timelineSwiper.slides[active].getAttribute（“数据父项”）；
$（`.swiper分页span[data index=“${index}”]`）.addClass（“swiper分页项目符号自定义活动”）；
});
html，
身体，
.集装箱{
身高：100%；
}
身体{
字体系列：“开放式Sans”，无衬线；
字体大小：14px；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：#fff；
弯曲方向：立柱；
}
.头衔{
字号：38px；
颜色：#6161；
字体：斜体；
字号：800；
}
.时间表{
宽度：100%；
背景色：#fff；
盒影：0 5px25px 5pxRGBA（0,0,0,0.2）；
}
.timeline.swiper容器{
高度：600px；
宽度：100%；
位置：相对位置；
}
.timeline.swiper包装器{
过渡：2s立方贝塞尔（0.68，-0.4,0.27,1.34）0.2s；
}
.时间线.滑动滑梯{
位置：相对位置；
颜色：#fff；
溢出：隐藏；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
.timeline.swiper幻灯片：：之后{
内容：“；
位置：绝对位置；
z指数：1；
右图：-115%；
底部-10%；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.7）；
盒影：-230px 0 150px 60vw rgba（0,0,0,0.7）；
边界半径：100%；
}
.timeline.swiper幻灯片内容{
位置：绝对位置；
文本对齐：居中；
宽度：80%；
最大宽度：310px；
右：50%；
最高：13%；
转换：转换（50%，0）；
字体大小：12px；
z指数：2；
}
.时间线.泳衣幻灯片.时间线年份{
显示：块；
字体：斜体；
字体大小：42px；
边缘底部：50px；
变换：translate3d（20px，0，0）；
颜色：#d4a024；
字体大小：300；
不透明度：0；
过渡：0.2s缓解0.4s；
}
.时间线.滑水器幻灯片.时间线标题{
字号：800；
字体大小：34px；
利润率：0.30px；
不透明度：0；
变换：translate3d（20px，0，0）；
过渡：0.2秒缓解0.5秒；
}
.timel
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide" year="1989">Content</div>
      <div class="swiper-slide" year="1990">Content</div>
      <div class="swiper-slide" year="1992">Content</div>
                  <div class="swiper-slide" year="1992">Content</div>
                  <div class="swiper-slide" year="1992">Content</div>
               <div class="swiper-slide" year="1993">Content</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

var mySwiper = new Swiper ('.swiper-container', {
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
            clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (menu[index]) + '</span>';
        },
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })