纯 javascript 轮播错误

Question

我正在尝试按照教程 here 构建纯 javascript 滑块，并进行少量定制。

我遇到的问题是：如果我添加超过 7 张幻灯片，第 7 张及以后的幻灯片将无法正确显示。只显示深灰色屏幕，而不是我选择的图片。

我尝试调试了几个小时，但仍然无法弄清楚。希望有高手能解答一下这个问题。

JSFIddle作者代码：https://jsfiddle.net/solodev/yokph2nh/

代码片段：

function changeSlides(instant) {
    if (!instant) {
        animating = true;
        manageControls();
        $slider.addClass("animating");
        $('#slide-content').addClass("animating");
        $slider.css("top");
        $(".slide").removeClass("active");
        $(".slide-" + curSlide).addClass("active");

        setTimeout(function() {
            $slider.removeClass("animating");
            $('#slide-content').removeClass("animating");
            // Update content
            let currentContent = $(".slide-" + curSlide + " .slide__content").html();
            $('#slide-content').html(currentContent);

            animating = false;
        }, animTime);
    }
    window.clearTimeout(autoSlideTimeout);
    $(".slider-pagi__elem").removeClass("active");
    $(".slider-pagi__elem-" + curSlide).addClass("active");
    $(".slider-tab__elem").removeClass("active");
    $(".slider-tab__elem-" + curSlide).addClass("active");
    $slider.css("transform", "translate3d(" + -curSlide * 100 + "%,0,0)");
    $slideBGs.css("transform", "translate3d(" + curSlide * 50 + "%,0,0)");
    diff = 0;
    autoSlide();
}

Answer 1

这是您发布的 fiddle 的修改版，其中包含更多图片。 https://jsfiddle.net/5xhtq4hL/

似乎工作正常。

可能您没有更新左侧的 css 值 .slide:nthchild() 选择器？

虽然这段代码看起来不是很干。这么多复制粘贴。

纯 javascript 轮播错误

Pure javascript carousel bugs

javascript

jquery

slider

carousel