Tiny Slider中获取最左侧可见幻灯片索引的实用指南

文章详细介绍了在小滑块中准确获取当前最右边幻灯片索引的方法。针对`getinfo().displayindex`在不同导航和交互场景下可能存在的局限性：种简单有效的dom查询策略：通过识别第一个标签`.tn s-slide-active`类的元素，可以轻松定位并获取最左边幻灯片的索引，确保在各种陷阱下获得准确的结果。引言

在构建响应式轮播图时，开发者Tiny Slider作为一种轻量级且功能强大的JavaScript轮播库，提供了多种获取幻灯片信息的方法。然而，在特定场景下，例如当用户通过左右导航箭头的不同方或者直接点击某个幻灯片时，若需获取最右边幻灯片： slider.getInfo().displayIndex可能会遇到挑战，因为它可能无法始终代表用户所见的““Tiny” Slider的getInfo()。根据导航（例如，点击左箭头和右箭头）或用户直接点击幻灯片等不同的交互方式，displayIndex返回所有可见幻灯片都返回相同的索引，这使得我们无法准确判断当前屏幕上最左可见幻灯片的具体位置。解决方案：基于DOM查询的策略

解决这个问题的关键在于利用Tiny SliderTiny，Tiny Slider会自动创建.tns-slide-active类。由于我们只需要获取“最左边”的幻灯片索引，因此，在所有带有.tns-slide-active类的元素中，第一说明：

这个方法简单理解，且不受导航方向或displayIndex行为模式的影响，它直接反映了DOM的实际渲染状态。

摩笔天书

摩笔天书AI绘本创作平台 135 张图片实现步骤与示例

要实现这一策略，我们需要执行以下步骤：初始化Tiny Slider：Tiny Slider：为了在幻灯片切换后动态获取索引，可以监听Tiny Slider的transitionEnd事件或在需要时手动触发查询。执行DOM查询：使用document.querySelector()。小滑块通常会在幻灯片元素上添加 data-tns-index 属性来存储其原始索引，即使在有克隆幻灯片的情况下，该属性也能提供准确的原始位置。

以下是一个具体的代码示例：lt；!DOCTYPE htmlgt；lt；html lang=quot；zh-CNquot；gt；lt；headgt；lt；meta charset=quot；UTF-8quot；gt； lt；meta name=quot；viewportquot； content=quot；width=device-width，initial-scale=1.0quot；gt； lt；titlegt；Tiny Slider获取最右边幻灯片索引lt；/titlegt；lt；!-- Tiny Slider CSS --gt； lt；link rel=quot；stylesheetquot； href=quot；https：//cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.cssquot；gt； lt；stylegt； body { font-family: Arial， sans-serif: margin: 20px；文本对齐：居中； 字体大小： 2em； 高度： 150px； 显示： flex； align-items： center； justify-content： center； box-sizing： border-box； } .controls { text-align： center； margin-top： 20px； } .controls button { padding： 10px 20px； margin： 0 5px； cursor： pointer； } #leftmostIndexDisplay { margin-top： 20px； font-size： 1.2em； font-weight： bold； text-align： center； }