掌握Tiny Slider：准确获取最左侧可见幻灯片索引

<div class="my-slider">
    <div class="tns-item" data-tns-index="0">幻灯片 1</div>
    <div class="tns-item" data-tns-index="1">幻灯片 2</div>
    <div class="tns-item" data-tns-index="2">幻灯片 3</div>
    <div class="tns-item" data-tns-index="3">幻灯片 4</div>
    <div class="tns-item" data-tns-index="4">幻灯片 5</div>
    <!-- 更多幻灯片 -->
</div>

// 假设您已经初始化了Tiny Slider实例
// const sliderInstance = tns({
//   container: '.my-slider',
//   items: 3, // 示例：一次显示3个幻灯片
//   slideBy: 'page',
//   autoplay: false,
//   nav: false,
//   controls: true
// });

/**
 * 获取Tiny Slider中最左侧可见幻灯片的原始索引。
 *
 * 该函数通过查询DOM中第一个具有'.tns-slide-active'类的元素，
 * 并读取其'data-tns-index'属性来确定最左侧幻灯片的原始索引。
 *
 * @returns {number} 最左侧可见幻灯片的原始索引。如果未找到任何活动的幻灯片，则返回 -1。
 */
function getLeftmostVisibleSlideIndex() {
    // Tiny Slider将'tns-slide-active'类添加到所有当前可见的幻灯片上。
    // 最左侧的可见幻灯片将是所有活动幻灯片中的第一个元素。
    const firstActiveSlide = document.querySelector('.tns-slide-active');

    if (firstActiveSlide) {
        // Tiny Slider通常会在幻灯片元素上添加data-tns-index属性，
        // 它代表了幻灯片在原始数据集中的索引。
        const originalIndex = parseInt(firstActiveSlide.getAttribute('data-tns-index'), 10);
        return isNaN(originalIndex) ? -1 : originalIndex;
    }
    return -1; // 没有找到任何活动的幻灯片
}

// --- 示例用法 ---

// 1. 在Tiny Slider的事件监听器中使用
// 例如，在每次幻灯片切换完成时获取最左侧索引
// if (typeof sliderInstance !== 'undefined') { // 确保sliderInstance已定义
//     sliderInstance.events.on('indexChanged', () => {
//         const leftmostIndex = getLeftmostVisibleSlideIndex();
//         console.log('当前最左侧可见幻灯片的原始索引是:', leftmostIndex);
//     });
// }

// 2. 为每个幻灯片添加点击事件，并判断是否点击了最左侧幻灯片
const allSlides = document.querySelectorAll('.my-slider .tns-item');
allSlides.forEach(slide => {
    slide.addEventListener('click', function() {
        const clickedIndex = parseInt(this.getAttribute('data-tns-index'), 10);
        const leftmostIndex = getLeftmostVisibleSlideIndex();

        if (clickedIndex === leftmostIndex) {
            console.log(`点击了最左侧幻灯片 (索引: ${clickedIndex})`);
        } else {
            console.log(`点击了非最左侧幻灯片 (索引: ${clickedIndex}), 当前最左侧是: ${leftmostIndex}`);
        }
    });
});

// 3. 页面加载后立即获取一次（如果Tiny Slider已初始化并显示）
document.addEventListener('DOMContentLoaded', () => {
    // 确保Tiny Slider有足够的时间初始化并渲染
    setTimeout(() => {
        const initialLeftmostIndex = getLeftmostVisibleSlideIndex();
        console.log('页面加载后初始最左侧可见幻灯片的原始索引:', initialLeftmostIndex);
    }, 100); // 稍微延迟以确保DOM更新
});