Splide JS：如何检测最后一张幻灯片处于激活状态

你的现有代码存在问题：document.querySelector('.splide__slide')只会选中页面中第一个带该类名的幻灯片，所以你判断的是第一个幻灯片有没有下一个兄弟元素，和当前激活的是不是最后一张完全无关。

正确的做法是利用SplideJS自带的API和事件来实现，步骤如下：

1. 先正确初始化Splide实例，然后监听它的active事件（每次幻灯片切换激活时触发）
2. 在事件回调里，通过Splide实例获取当前激活幻灯片的索引，和总幻灯片数量对比，判断是否是最后一张

完整代码示例：

// 初始化Splide轮播
const splide = new Splide( '.splide', {
  // 这里填你的轮播配置项，比如：
  type: 'slide',
  perPage: 1,
} ).mount();

// 监听幻灯片激活事件
splide.on( 'active', function() {
  // 当前激活幻灯片的索引（从0开始计数）
  const currentIndex = splide.index;
  // 总幻灯片数量
  const totalSlides = splide.length;

  // 判断是否是最后一张
  if ( currentIndex === totalSlides - 1 ) {
    console.log( "当前是最后一张，执行你的操作" );
    // 在这里写你要执行的特定操作
  } else {
    console.log( "不是最后一张" );
  }
} );

关键说明： #

• splide.index：返回当前激活幻灯片的索引，索引从0开始
• splide.length：返回轮播里的总幻灯片数量
• active事件：每次幻灯片切换并完成激活状态后触发，适合用来做状态判断

内容的提问来源于stack exchange，提问作者Front-End News