如何获取Tiny Slider中最左侧幻灯片的索引？

核心方案：使用getInfo().indexes.visible数组 #

displayIndex是配合导航箭头逻辑设计的，所以会出现你遇到的方向不一致问题。要获取当前可见区域最左侧的幻灯片索引，应该用slider.getInfo().indexes.visible[0]——这个数组会按幻灯片的显示顺序返回所有可见项的索引，第一个元素就是最左侧的那一张。

给幻灯片绑定点击事件的实现方式 #

方式1：初始化时通过钩子绑定

在Tiny Slider初始化的onInit钩子中，给每个幻灯片添加点击事件，直接对比索引：

const slider1 = tns({
  container: '.your-slider-container',
  // 你的其他配置项（比如loop、items等）
  onInit: function(slider) {
    slider.slides.forEach((slide, index) => {
      slide.addEventListener('click', () => {
        const sliderInfo = slider.getInfo();
        const leftmostIndex = sliderInfo.indexes.visible[0];
        
        if (index === leftmostIndex) {
          // 点击的是最左侧幻灯片，执行你的逻辑
          console.log('点击了最左侧幻灯片');
        } else {
          console.log('点击的不是最左侧幻灯片');
        }
      });
    });
  }
});

方式2：事件委托（更高效）

如果幻灯片数量较多或者有动态更新的情况，用事件委托绑定父容器的点击事件，避免重复绑定：

const sliderContainer = document.querySelector('.your-slider-container');
const slider1 = tns({
  container: sliderContainer,
  // 你的其他配置项
});

sliderContainer.addEventListener('click', (e) => {
  // 找到被点击的幻灯片元素
  const targetSlide = e.target.closest('.tns-item');
  if (!targetSlide) return;

  const sliderInfo = slider1.getInfo();
  const leftmostIndex = sliderInfo.indexes.visible[0];
  // 获取当前点击幻灯片的索引
  const clickedSlideIndex = Array.from(targetSlide.parentElement.children).indexOf(targetSlide);

  if (clickedSlideIndex === leftmostIndex) {
    // 执行最左侧幻灯片的点击逻辑
    console.log('点击了最左侧幻灯片');
  }
});

补充说明 #

• indexes.visible数组的索引是从0开始的，和Tiny Slider内部的幻灯片索引规则一致
• 如果开启了loop模式，这个数组依然会正确返回当前可见区域的幻灯片索引，不受循环克隆元素的影响

内容的提问来源于stack exchange，提问作者erlango3