javascript - 我的网站上的问题 - Javascrip 横幅滑块

Question

您好，我正在建立一个网站，我们正在做一个带有 3 页信息的 carrowsel 横幅，在这个 carrowsel 信息中有一个计时器应该为下一个横幅传递...但它只是出现 css 栏并没有改变我的错误是什么...我已经尝试更改我的 js，但我无法弄清楚....

        /*---------------------------
            banner V3 slider
        ---------------------------*/
        var bannerSlider = $(".banner-v3-slider-area-wrapper");
        if (bannerSlider.length) {
            bannerSlider
                .slick({
                    slidesToShow: 1,
                    autoplay: false,
                    arrows: false,
                    pauseOnFocus: true,
                    pauseOnHover: false,
                    pauseOnDotsHover: true,
                    dots: true,
                    autoplaySpeed: 10,
                    responsive: [{
                        breakpoint: 769,
                        settings: {
                            dots: false
                        }
                    }]
                })
                .slickAnimation();
        }

        $(".banner-v3-slider-area-wrapper").on("beforeChange", function(event, slick, currentSlide, nextSlide) {
            var firstNumber = check_number(++nextSlide);
            $(".banner-v3-slider-controls .slider-extra .text .first").text(firstNumber);
            resetProgressbar(
                $(".banner-v3-slider-controls .slider-extra .slider-progress .progress-width")
            );
        });
        $(".banner-v3-slider-area-wrapper").on("afterChange", function(event, slick, currentSlide, nextSlide) {
            startProgressbar(
                $(".banner-v3-slider-controls .slider-extra .slider-progress .progress-width")
            );
        });
        startProgressbar($(".banner-v3-slider-controls .slider-extra .slider-progress .progress-width"));
        //progressbar js
        function startProgressbar(selector) {
            selector.css({
                width: "100%",
                transition: "all 10ms"
            });
        }

        function resetProgressbar(selector) {
            selector.css({
                width: "0%",
                transition: "all 10ms"
            });
        }
        var bannerv3Slider = $(".banner-v3-slider-area-wrapper").slick("getSlick");
        var bannerv3SliderCount = bannerv3Slider.slideCount;
        $(".banner-v3-slider-controls .slider-extra .text .last").text(check_number(bannerv3SliderCount));

        function check_number(num) {
            var IsInteger = /^[0-9]+$/.test(num);
            return IsInteger ? "0" + num : null;
        }

    <!-- banner area start -->
    <div class="banner-v3-area banner-v3-bg">
        <!-- banner slider area start -->
        <div class="banner-v3-slider-area-wrapper animated" data-animation-in="slideInDown">
            <div class="banner-slider-item">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-7">
                            <div class="banner-inner-wrap">
                                <div class="banner-inner">
                                    <!-- banner inner -->
                                    <p class="subtitle">xxxxxxxxxxxxxxxxx</p>
                                    <h2>xxxxxxxxxxxxx</h2>
                                    <h3 style="color: #ffffff; font-weight: 600;">xxxxxxxxxxxxxxxxxxxxxxxx</h3>    
                                    <br>
                                    <div class="btn-wrapper animated fadeInUpBig text-left">
                                        <a href="#" class="btn btn-basic">xxxxxxxxxxxxxxxxxxxx</a>
                                        <a href="https://www.youtube.com/watch?v=d0XKtUXgpOw" class="video-popup mfp-iframe play-icon-pulse"><i class="fa fa-play"></i></a>

                                    </div>
                                </div>
                                <!-- //.banner inner -->
                            </div>

                        </div>
                        <div class="col-lg-5 d-none d-lg-block">
                            <div class="banner-image">
                                <div class="banner-slide-image animated" data-animation-in="slideInUp">
                                    <img src="assets/img/banxxxxx.png" alt="banner">
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="banner-slider-item">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-lg-7">
                            <div class="banner-inner-wrap">
                                <div class="banner-inner">
                                    <!-- banner inner -->
                                    
                                    <h2> xxxxxxxxxxxxxxxxxxxxxx</h2>
                                    <p class="subtitle">xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                                    <div class="btn-wrapper animated fadeInUpBig text-left">
                                        <a href="#" class="btn btn-basic">xxxxxxxxxxxxxxxxxxxx</a>
                                        <a href="https:/xxxxxxxxxxxxxxxOw" class="video-popup mfp-iframe play-icon-pulse"><i class="fa fa-play"></i></a>

                                    </div>
                                </div>
                                <!-- //.banner inner -->
                            </div>

                        </div>
                        <div class="col-lg-5 d-none d-lg-block">
                            <div class="banner-image">
                                <div class="banner-slide-image animated" data-animation-in="slideInUp">
                                    <img src="assets/img/banner/04.png" alt="banner">
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="banner-slider-item">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-lg-7">
                            <div class="banner-inner-wrap">
                                <div class="banner-inner">
                                    <!-- banner inner -->
                                    
                                    <h2>xxxxxxxxxxxxxxxxx</h2>
                                    <h3 style="color: #ffffff; font-weight: 600;">xxxxxxxxxxxxxxxxxxxx</h3>    
                                    <div class="btn-wrapper animated fadeInUpBig text-left">
                                        <a href="#" class="btn btn-basic">xxxxxxxxxx</a>
                                        <a href="https://www.youtube.com/watch?v=d0XKtUXgpOw" class="video-popup mfp-iframe play-icon-pulse"><i class="fa fa-play"></i></a>

                                    </div>
                                </div>
                                <!-- //.banner inner -->
                            </div>

                        </div>
                        <div class="col-lg-5 d-none d-lg-block">
                            <div class="banner-image">
                                <div class="banner-slide-image animated" data-animation-in="slideInUp">
                                    <img src="assets/img/banner/05.png" alt="banner">
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </div>

标签： javascripthtmlcss