如何在Svelte中隐藏Tiny-slider幻灯片编号并访问该编号

一、移除图片上方的幻灯片编号 #

你的代码里已经关闭了导航（nav: false）和控制按钮（controls: false），但仍显示编号，大概率是Tiny-slider自动生成的计数器元素（类名一般是.tns-counter）。直接用CSS隐藏它就行：

.tns-counter {
  display: none !important;
}

如果这个类名不对，打开浏览器开发者工具定位到编号元素，查看它的具体类名后用同样方式隐藏即可。另外也可以检查下是否引入了Tiny-slider的官方CSS——未引入可能导致默认样式异常，引发多余元素显示，用上述CSS方法也能强制处理。

二、获取幻灯片编号（索引）用于自定义功能 #

Tiny-slider的实例提供了getInfo()方法，能获取滑块的所有状态信息，其中就包含当前幻灯片的索引：

// 在需要获取索引的逻辑里调用
const sliderInfo = slider.getInfo();
const currentSlideIndex = sliderInfo.index; // 从0开始计数，比如第一张对应0，第二张对应1

你可以把这个索引用在自定义逻辑里，比如点击图片时根据索引做处理，或者监听滑块的indexChanged事件实时获取当前索引：

onMount(()=>{
  slider = tns({
    // 你的原有配置...
    container: ".my-slider",
    slideBy: 1,
    speed: 1000,
    nav: false,
    controls: false,
    autoplay: true,
    autoplayButtonOutput: false,
    responsive: {
      1024: {
        items: 4,
      }
    },
  })

  // 监听索引变化，实时获取当前值
  slider.events.on('indexChanged', () => {
    const currentIndex = slider.getInfo().index;
    // 这里写你的自定义逻辑，比如打印索引、更新内部状态等
    console.log('当前幻灯片索引：', currentIndex);
  })
})

这个方式获取的索引完全不会在页面上显示，仅用于代码内的自定义功能。

内容的提问来源于stack exchange，提问作者Tchaly Leandre Jr.