如何使用活动的 Swup 重新启动 Swiper js？

Question

页面上有以下脚本，无需重新加载页面即可更改内容：

var swup = new Swup({
        animationSelector: '[class*="swup-transition-"]'
      });

主页上有一个带有连接的滑动器的滑块。 在初始加载时，滑块工作，一切都很好。 但是，一旦我转到另一个页面并返回，滑块就不起作用，按钮也不起作用...... swiper 初始化脚本本身如下所示：

import Swiper from 'https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.mjs'
      var swiper = new Swiper(".mySwiper", {
        autoplay: {
          delay: 5000,
        },
        loop: true,
        scrollbar: {
          el: ".swiper-scrollbar",  
          hide: true,
        },
      });

我尝试通过 API 方法 .UpdateProgress()、.update Size()、.update Slides()、.update() 来完成此操作。 什么也没发生...

Answer 1

我相信你应该使用 Swup 的钩子。您可以将 Swiper 初始化包装在一个函数中，然后为

animation:in:start

钩子调用它，例如，如下所示：

var swup = ...

function initSwiper() {
  ...
}

swup.hooks.on('animation:in:start', () => {
  initSwiper();
});

initSwiper();

您可以在此处阅读有关 Swup 挂钩的更多信息。