关于Tilda滑块停止循环及首尾页分页按钮禁用的技术问询

1. 停止滑块循环跳转 + 首尾幻灯片按钮禁用样式实现 #

步骤1：添加禁用按钮的CSS样式 #

先在页面样式中定义按钮禁用状态的视觉效果，实现半透明且无法点击的状态：

.slider__btn--left--disabled,
.slider__btn--right--disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

步骤2：完善JavaScript逻辑 #

修改原代码的按钮状态处理逻辑，确保所有切换场景（初始化、按钮点击、键盘操作、分页点点击）都能正确更新按钮状态，同时停止循环跳转：

(function () {
    const slides = document.querySelectorAll(`.slider`);
    const buttonLeft = document.querySelector(`.slider__btn--left`);
    const buttonRight = document.querySelector(`.slider__btn--right`);
    const dots = document.querySelectorAll(`.dot`);

    let curSlide = 0;
    const maxSlide = slides.length - 1;
    let slideArr = [];

    // 统一更新按钮禁用/启用状态
    const updateButtonStates = () => {
        buttonLeft.classList.toggle("slider__btn--left--disabled", curSlide === 0);
        buttonRight.classList.toggle("slider__btn--right--disabled", curSlide === maxSlide);
    };

    const dotFill = (slide) => {
        dots.forEach((el, i) => {
            if (i === slide) {
                el.classList.add("cur_dot");
            } else if (el.classList.contains("cur_dot")) {
                el.classList.remove("cur_dot");
            }
        });
    };

    const classSlide = (elementClass) => {
        elementClass.forEach((el) => {
            slideArr.push(document.querySelector(`.tn-elem__${el} .tn-atom`));
        });
    };
    const fillSlide = (slidesArray, link, controls, muted, playsinline) => {
        slidesArray.forEach((el, i) => {
            el.insertAdjacentHTML(
                `beforeend`,
                `<div class="video-container">
                <div class="video-card">
                <video ${muted ? "" : "muted"} ${playsinline ? "playsinline" : ""
                } ${controls ? "controls" : "autoplay"} preload="metadata">
                <source src="${link[i].replace(
                    "https://www.dropbox.com",
                    "https://www.dl.dropboxusercontent.com"
                )}#t=0.001" type="video/mp4" onloadedmetadata="this.muted = ${muted}">
                </video>
                </div>
                </div>`
            );
        });
    };

    const classArray = ["6273074581691877236257",
        "6273074581691877731323",
        "6273074581691877748465",
        "6273074581691877771834",
        "6273074581691877790410",
        "6273074581691877801530",
        "6273074581691877814586",
        "6273074581691877827282",
        "6273074581691879608980",
        "6273074581691879650426"];

    classSlide(classArray);

    const linksArray = ["https://www.dropbox.com/scl/fi/9bfttgotrymof14gio4if/1.mp4?rlkey=mahxcnu7c5x3twr0khxt3u43h&dl=0",
        "https://www.dropbox.com/scl/fi/k91yehjt2lqc4eo4w6665/2.mp4?rlkey=0x0nepmmupqgkmalvauzui92o&dl=0",
        "https://www.dropbox.com/scl/fi/gd5vbtgssyb0hkih4q7hu/3.mp4?rlkey=yq76364kkwsw2r15x6hus061z&dl=0",
        "https://www.dropbox.com/scl/fi/wrrgsrdtxdxdquf8nlypc/4.mp4?rlkey=03e7cuc1pajwanrj0rj5zu624&dl=0",
        "https://www.dropbox.com/scl/fi/ultat8awgnagbjucu2len/5.mp4?rlkey=pdhjlvyqoo9i9lzmaai2869ha&dl=0",
        "https://www.dropbox.com/scl/fi/2db90pnupmvfr60mtvxw0/6.mp4?rlkey=kjmoggpkfctgqts4mcxdi0wzq&dl=0",
        "https://www.dropbox.com/scl/fi/xtuyvl9hslhpfeqiperij/7.mp4?rlkey=1dz64y3ugci2hcqhy5ttay0wz&dl=0",
        "https://www.dropbox.com/scl/fi/2pptx7qzv9mfwgjil9rxe/8.mp4?rlkey=dgl20izazspbul2q9foxkqlkf&dl=0",
        "https://www.dropbox.com/scl/fi/clxwm1cx6duz1oc7lqjz1/9.mp4?rlkey=murp4lqr6wls3m44m8fy8da9d&dl=0",
        "https://www.dropbox.com/scl/fi/t24r7b0a32f3ug9k4r07m/10.mp4?rlkey=fqzsg2let5arqthrlhy920xhf&dl=0"];


    fillSlide(
        slideArr,
        linksArray,
        "controls",
        "unmuted",
        "playsinline"
    );

    // 补充幻灯片切换核心逻辑（原代码缺失）
    const goToSlide = (slide) => {
        slides.forEach((s, i) => {
            s.style.transform = `translateX(${100 * (i - slide)}%)`;
        });
    };

    const initCondition = () => {
        goToSlide(0);
        dotFill(0);
        updateButtonStates(); // 初始化时设置按钮状态
    };

    const toNextSlide = () => {
        if (curSlide === maxSlide) return; // 到达最后一张，停止跳转
        curSlide++;
        goToSlide(curSlide);
        dotFill(curSlide);
        updateButtonStates();
    };
    const toPrevSlide = () => {
        if (curSlide === 0) return; // 到达第一张，停止跳转
        curSlide--;
        goToSlide(curSlide);
        dotFill(curSlide);
        updateButtonStates();
    };
    buttonRight.addEventListener(`click`, toNextSlide);
    buttonLeft.addEventListener(`click`, toPrevSlide);
    document.addEventListener(`keydown`, (e) => {
        e.key === `ArrowRight` && toNextSlide();
        e.key === `ArrowLeft` && toPrevSlide();
    });
    dots.forEach((el, i) =>
        el.addEventListener("click", () => {
            curSlide = i;
            dotFill(i);
            goToSlide(i);
            updateButtonStates();
        })
    );
    initCondition();
})();

关键修改说明 #

• 停止循环跳转：在toNextSlide和toPrevSlide函数中，判断当前幻灯片是否处于边界（最后一张/第一张），如果是则直接返回，不执行后续切换逻辑，彻底终止循环。
• 按钮状态管理：
  1. 新增updateButtonStates函数，用classList.toggle简化按钮禁用/启用的逻辑判断。
  2. 在初始化、所有切换操作后调用该函数，确保按钮状态与当前幻灯片位置同步。
• 补充核心切换逻辑：原代码缺失goToSlide函数，补充了标准的幻灯片位移控制逻辑，通过transform: translateX实现幻灯片切换效果。

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