Javascript 如何使用swiper滑块进行计时器分页

现在，我正在尝试使用计时器分页制作swiper幻灯片。 我有一些滑头前的计时器分页

现在，我的计时器分页的速度和滑块的持续时间不同

并且在单击事件中也不起作用ㅜㅜ.

以下是我到目前为止的情况：

这是HTML部分

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

这里是javascript

$(document).ready(function(){
  var _is_speed = 3000;
  var swiper = new Swiper('.swiper-container', {
    speed: 1000,
    autoplay: {
      delay:_is_speed,
      waitForTransition: true,
      disableOnInteraction: false,
    },
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      bulletActiveClass:'active',
      renderBullet: function(index, className) {
        return '<span class="'+className+'"></span>';
      },
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  
  //ticking machine
    var percentTime;
    var tick;
    var time = 1;
    var progressBarIndex = 0;

    $('.swiper-pagination .swiper-pagination-bullet').each(function(index) {
        var progress = "<div class='inProgress inProgress" + index + "'></div>";
        $(this).html(progress);
    });

    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        tick = setInterval(interval, 10);
    }

    function interval() {
        if ($('.swiper-slide').hasClass('swiper-slide-active') === "true" ) {
            progressBarIndex = $('.swiper-slide').data("swiper-slide-index");          
            startProgressbar();
        } else {
            percentTime += 1 / (time + 5);
            $('.inProgress' + progressBarIndex).css({
                width: percentTime + "%",
            });
            if (percentTime >= 100) {
                $('.swiper-slide').hasClass('swiper-slide-active');
                progressBarIndex++;
                if (progressBarIndex > 2) {
                    progressBarIndex = 0;
                }
                startProgressbar();
            }
        }
    }

    function resetProgressbar() {
        $('.inProgress').css({
            width: 0 + '%'
        });
        clearInterval(tick);
    }
    startProgressbar();
    // End ticking machine

    $('.swiper-pagination span').click(function () {
        clearInterval(tick);
        var goToThisIndex = $(this).find("span").data("tabindex");
        swiper.slideNext();
        startProgressbar();
    });
  
});

$（文档）.ready（函数（）{
var_是_速度=3000；
var swiper=新的swiper（“.swiper容器”{
速度：1000，
自动播放：{
延迟：_是_速度，
waitForTransition：对，
disableOnInteraction:false，
},
循环：对，
分页：{
el:“.swiper分页”，
可点击：正确，
bulletActiveClass:“活动”，
renderBullet:函数（索引、类名）{
返回“”；
},
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
});
//滴答机
var百分比时间；
变种蜱；
var时间=1；
var progressBarIndex=0；
$（'.swiper分页.swiper分页项目符号'）。每个（函数（索引）{
var progress=“”；
$（this.html（progress）；
});
函数startProgressbar（）{
resetProgressbar（）；
百分比时间=0；
勾选=设置间隔（间隔，10）；
}
函数间隔（）{
if（$（'.swiper-slide'）.hasClass（'swiper-slide-active'）==“true”）{
progressBarIndex=$（'.swiper幻灯片'）。数据（“swiper幻灯片索引”）；
startProgressbar（）；
}否则{
百分比时间+=1/（时间+5）；
$（'.inProgress'+progressBarIndex）.css({
宽度：百分比时间+“%”，
});
如果（百分比时间>=100）{
$（'.swiper-slide'）.hasClass（'swiper-slide-active'）；
progressBarIndex++；
如果（progressBarIndex>2）{
progressBarIndex=0；
}
startProgressbar（）；
}
}
}
函数resetProgressbar（）{
$（'.inProgress'）.css({
宽度：0+“%”
});
清除间隔（滴答声）；
}
startProgressbar（）；
//端部打勾机
$（'.swiper分页范围'）。单击（函数（）{
清除间隔（滴答声）；
var goToThisIndex=$（this.find（“span”）.data（“tabindex”）；
swiper.slideNext（）；
startProgressbar（）；
});
});

任何帮助都将不胜感激

$(document).ready(function(){
  var _is_speed = 3000;
  var swiper = new Swiper('.swiper-container', {
    speed: 1000,
    autoplay: {
      delay:_is_speed,
      waitForTransition: true,
      disableOnInteraction: false,
    },
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      bulletActiveClass:'active',
      renderBullet: function(index, className) {
        return '<span class="'+className+'"></span>';
      },
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  
  //ticking machine
    var percentTime;
    var tick;
    var time = 1;
    var progressBarIndex = 0;

    $('.swiper-pagination .swiper-pagination-bullet').each(function(index) {
        var progress = "<div class='inProgress inProgress" + index + "'></div>";
        $(this).html(progress);
    });

    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        tick = setInterval(interval, 10);
    }

    function interval() {
        if ($('.swiper-slide').hasClass('swiper-slide-active') === "true" ) {
            progressBarIndex = $('.swiper-slide').data("swiper-slide-index");          
            startProgressbar();
        } else {
            percentTime += 1 / (time + 5);
            $('.inProgress' + progressBarIndex).css({
                width: percentTime + "%",
            });
            if (percentTime >= 100) {
                $('.swiper-slide').hasClass('swiper-slide-active');
                progressBarIndex++;
                if (progressBarIndex > 2) {
                    progressBarIndex = 0;
                }
                startProgressbar();
            }
        }
    }

    function resetProgressbar() {
        $('.inProgress').css({
            width: 0 + '%'
        });
        clearInterval(tick);
    }
    startProgressbar();
    // End ticking machine

    $('.swiper-pagination span').click(function () {
        clearInterval(tick);
        var goToThisIndex = $(this).find("span").data("tabindex");
        swiper.slideNext();
        startProgressbar();
    });
  
});