时间戳

首页 > 解决方案 > 在进度条上反映幻灯片过渡的进度

javascript - 在进度条上反映幻灯片过渡的进度

问题描述

进度条的过渡swiperjs：https ://swiperjs.com直到它更改到另一张幻灯片才反映实际进度。

我希望它像 Facebook 和 Instagram 故事一样在自动播放中显示： 在此处输入图像描述

我尝试通过添加watchSlidesProgress: true,文档中指出的参数，但没有监听事件。

关于如何做的任何帮助？

这是示例网站：http: //z-testing.000webhostapp.com/progressbar-animation/

这是我的代码：

$(document).ready(function(){
  var swiperH = new Swiper('.swiper-container-h', {
    paginationClickable: true,
    nested: true,
    watchSlidesProgress: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    speed: 500,
    simulateTouch: false,
    pagination: {
      el: ".swiper-pagination",
      type: "progressbar"
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  var swiperV = new Swiper('.swiper-container-v', {
    direction: 'vertical',
    slidesPerView: 'auto',
    nested: true,
    freeMode: true,
    mousewheel: true,
    pagination: {
      el: '.swiper-pagination-v',
      clickable: true,
    },
  });
});

标签： javascripthtmljquerycssswiperjs

解决方案

推荐阅读