Question

我知道这是一个老问题，但我没有得到适当的解决方案。我正在使用magento。在那我有一个滑块的phtml文件。我使用了flexsider，现在正在尝试swiper.js。但问题是它们都不能正常工作。我的意思是当我刷新页面滑块不起作用，但当我打开开发人员工具或firebug它工作。我尝试过使用firefox和chrome，并在两个浏览器上遇到同样的问题。有谁知道这个问题？或者至少可以告诉我问题出在哪里？

谢谢。

Answer 1

首先，Ctrl + Shift + F5是你的朋友。

其次，这听起来像是缓存问题。如果您以任何方式为静态资产启用了缓存，则需要更改它。在任何开发堆栈上肯定有好的和有效的缓存解决方案，但是你的解决方案似乎会引起问题。

Answer 2

我知道这是一个旧线程，但我已经被这个问题困住了 2 天，终于找到了修复！

参考：https://swiperjs.com/swiper-api#parameters

只需将 observer 参数设置为 true。

const params = {
  loop: true,
  speed: 1000,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  watchSlidesVisibility: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  observer: true,
  renderPrevButton: () => (
    <button className="swiper-button-prev ht-swiper-button-nav">
      <FiChevronLeft />
    </button>
  ),
  renderNextButton: () => (
    <button className="swiper-button-next ht-swiper-button-nav">
      <FiChevronRight />
    </button>
  ),
};

这会在 Swiper 及其元素上启用 Mutation Observer，这会使 Swiper 在每次更改其样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片）时更新（重新初始化）。

只有在任何浏览器上打开开发者工具后，Javascript才能运行

2 个答案: