实现 UIKit Slider 强制向前（下一张）导航

<div id="slider" class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
    <ul class="uk-slider-items uk-grid uk-grid-collapse">
        <li class="uk-width-auto" style="width: 30%">
            <div class="uk-panel">
                <div style="background-image:url('https://getuikit.com/docs/images/photo.jpg'); width: 100%; height: 400px;"></div>
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading 1</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                    <button class="uk-button uk-button-secondary slider-button" data-slide-index="0">Show</button>
                </div>
            </div>
        </li>
        <!-- 更多类似的幻灯片项，data-slide-index 分别为 1, 2, 3, 4 -->
    </ul>
</div>

$(".slider-button").click(function() {
    var slideIndex = $(this).data("slide-index");
    // UIkit.slider("#slider").show(slideIndex); // 默认行为
});

$(".slider-button").click(function() {
    var targetSlideIndex = $(this).data("slide-index"); // 获取目标幻灯片的索引
    var slider = UIkit.slider("#slider"); // 获取 Slider 实例

    // 判断目标索引是否大于当前幻灯片索引
    if (targetSlideIndex > slider.index) {
        // 如果目标索引在当前索引之后，直接跳转到目标幻灯片
        slider.show(targetSlideIndex);
    } else {
        // 如果目标索引在当前索引之前或等于当前索引，强制向前滑动
        // 注意：这里需要循环调用 'next' 直到达到目标，或者更直接地，在无限循环场景下，
        // 如果目标是第一个，而当前不是第一个，直接跳转到第一个也通常被认为是向前。
        // 但为了严格的“只向前”行为，我们选择模拟向前一步。
        // 对于无限循环且希望从末尾到开头也算“向前”的情况，
        // 实际逻辑可能更复杂，需要考虑模运算。
        // 原始问题描述是“当点击去第一张时，它会像‘上一张’那样回退，而不是‘下一张’”，
        // 这里的解决方案是确保它不会回退。
        // 最简单的处理是：如果目标是第一个且当前不是第一个，强制向前一次，
        // 否则，如果目标在当前之前，UIkit可能会回退。
        // 考虑到原始答案的意图，`slider.show('next')` 是为了避免回退。
        // 如果目标是0，而当前是4，`slider.show(0)` 会回退。
        // `slider.show('next')` 会从4到0。

        // 实际应用中，如果目标是0，而当前是4，且我们希望它从4 -> 0（通过5, 0），
        // 那么`slider.show(targetSlideIndex)` 仍然是正确的。
        // 原始答案的意图是：如果目标小于当前，但我们想保持“向前”的视觉效果，
        // 那么就只前进一格。这可能适用于每次点击只前进一格的场景，
        // 而非点击跳转到任意页。

        // 重新审视原始答案的意图：
        // `if ( slideIndex > slider.index ) { slider.show(slideIndex); } else { slider.show('next'); }`
        // 这段代码的含义是：
        // 1. 如果目标比当前靠后，直接跳到目标。
        // 2. 如果目标比当前靠前（或相等），则只向前一步。
        // 这种逻辑适用于：如果用户点击了一个“更远”的页面，就直接跳过去；
        // 如果用户点击了一个“更近”（或相同）的页面，但又不想让它回退，
        // 就只让它向前走一步。这可能不是直接跳到目标页，而是“避免回退”的一种策略。

        // 针对“强制只向前，不回退”的需求，如果目标是特定的某个索引，
        // 且该索引小于当前索引，但我们仍希望通过“向前”的方式到达。
        // 例如，从索引 4 到索引 0，我们希望它从 4 -> 5 -> 0。
        // UIkit的`show(index)`在无限循环模式下会处理这个。
        // 原始问题的核心是：`show(0)`导致回退。
        // 那么，如果目标是0，而当前是4，`show(0)`会向左滑动。
        // `show('next')`会向右滑动。
        // 原始答案的逻辑是：如果目标比当前大，直接跳。否则，只前进一格。
        // 这意味着，如果用户点击了第一个按钮（index 0），而当前在第四个（index 3），
        // `0 > 3` 为假，会执行 `slider.show('next')`，只会从 3 走到 4。
        // 这并不能直接跳到 0。

        // 重新解读：
        // 问题：从 4 到 0，它像“上一张”而不是“下一张”。
        // 答案：`if ( slideIndex > slider.index ) { slider.show(slideIndex); } else { slider.show('next'); }`
        // 假设当前在索引 4，点击 `data-slide-index="0"` 的按钮：
        // `targetSlideIndex = 0`, `slider.index = 4`
        // `0 > 4` 为假，执行 `slider.show('next')`。
        // 结果：Slider 从 4 移动到 0（如果 0 是 5 的下一个，即循环）。
        // UIkit 的 `show('next')` 会处理循环。
        // 所以，这个 `else` 分支的 `slider.show('next')` 实际上是让 Slider 按照“下一个”的逻辑走一步。
        // 如果目标是 0，且当前是 4，那么 `slider.show('next')` 会让 Slider 从 4 走到 0（因为 0 是 4 的下一个，通过循环）。
        // 这样就避免了从 4 直接“回退”到 0 的效果。

        // 所以，原始答案的逻辑是正确的，它利用了 UIkit 在无限循环模式下 `show('next')` 会正确处理从末尾到开头的循环行为。
        slider.show('next'); // 强制向前滑动一步
    }
});