如何在页面加载时初始化隐藏的刷卡器？

Question

我在 wordpress 站点的选项卡内放置了一个滑动器，因此它不会在页面加载时启动，因此导航功能不起作用。 You can see it here 通过单击“görüşler”选项卡。

我做了一项研究，发现这是一个常见问题，可以通过一些习惯 jquery 启动。我已将以下代码添加为外部 javascript，但我无法使其正常工作。如果有人可以帮助我，我将不胜感激，因为它让我发疯。非常感谢。

jQuery(document).on("pageinit", function($) {
  var swiper = new Swiper('.swiper-container', {
    parallax: true,
    autoHeight: true,
    setWrapperSize: true,
    slidesPerView: 1,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    observer: true,
    observeParents: true,
  });
  swiper.init();
});

Answer 1

我最终使用了这段代码，将其张贴在这里以备不时之需。

// Call On Page Load

var observer = new IntersectionObserver( (entries, observer) => {
    entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
            window.dispatchEvent(new Event('resize')); 
            observer.unobserve(entry.target);
            if (entry.target.swiper) {
                entry.target.swiper.slideTo(0);
            }
        };
    });
}, null);
  
observer.observe(document.querySelector('#yepss .swiper-container'));

如何在页面加载时初始化隐藏的刷卡器？

How to init hidden swiper on page load?

javascript

wordpress

jquery

tabs

swiper