WordPress 中的轮播问题（店面主题）

Question

我正在为我的商店使用 Woocommerce Storefront 主题，我的目标是添加带有图像的简单、无拖动的轮播。我尝试使用 Swiper 库来做到这一点，当我用纯 html、css 和 js 测试我的代码时，一切正常。但是，当我将代码放入 functions.php 的 Storefront 挂钩时，轮播不起作用。我尝试了另一个轮播库 - Embla，但问题仍然存在。 Carousel 显示正常，但无法移动幻灯片（在 click 和 movemouse 事件期间幻灯片正在拖动，但在重新单击鼠标或在移动设备上触摸后会弹回起始位置）。

您可以在此处实时查看问题（橙色按钮下的轮播，仅适用于小于 768 像素的视口）：

https://skylo-test1.pl

我怀疑原因可能是 Storefront 主题中隐藏了一些 CSS 或 JS，但我将 style.css 文件中的所有 CSS 都注释掉了，但这并不能解决问题。

我也尝试禁用所有插件，但效果不佳。

这是我的html：

 <div class="carousel__content swiper-container">
            <div class="carousel__embla swiper-wrapper">
                <a class="carousel__item" href=".">
                    <img class="carousel__item__img" src="<?php echo get_bloginfo('stylesheet_directory') . '/assets/images/alcanta/slider-looked.png'; ?>" alt="carousel-item" />
                </a>

                <a class="carousel__item" href=".">
                    <img class="carousel__item__img" src="<?php echo get_bloginfo('stylesheet_directory') . '/assets/images/alcanta/slider-looked.png'; ?>" alt="carousel-item" />
                </a>

                <a class="carousel__item" href=".">
                    <img class="carousel__item__img" src="<?php echo get_bloginfo('stylesheet_directory') . '/assets/images/alcanta/slider-looked.png'; ?>" alt="carousel-item" />
                </a>

                <a class="carousel__item" href=".">
                    <img class="carousel__item__img" src="<?php echo get_bloginfo('stylesheet_directory') . '/assets/images/alcanta/slider-looked.png'; ?>" alt="carousel-item" />
                </a>
            </div>
        </div>

CSS：

.carousel__content {
    overflow: hidden;
}

.carousel__embla {
    display: flex;
}

.carousel__item {
    display: block;
    position: relative;
    flex: auto;
    margin-right: 20px;
}

当我尝试使用 Swiper 时的 Javascript：

const swiper = new Swiper('.swiper-container', {
   freeMode: true,
   slidesPerView: 2
});

当我尝试使用 Embla 时的 Javascript：

const emblaContainer = document.querySelector(".carousel__content");
const emblaOptions = {
    dragFree: true,
    containScroll: "trimSnaps"
};

const embla = EmblaCarousel(emblaContainer, emblaOptions);

Answer 1

您可能正在寻找名为 embla.clickAllowed() 的 Embla 选择加入方法。我不知道你使用的是 VanillaJS 还是 ReactJS 版本的 Embla。无论如何，示例用法看起来是这样的：

VanillaJS

const onSlideClick = (index) => {
  if (!embla.clickAllowed()) return
  
  // Embla says the pointer interaction was a static click, and not a drag move.
  // Do your magic here...
}

embla.slideNodes().forEach((slide, index) => {
  slide.addEventListener('click', () => onSlideClick(index), false)
})

ReactJS

const onSlideClick = useCallback((index) => {
  if (!embla || !embla.clickAllowed()) return

  // Embla says the pointer interaction was a static click, and not a drag move.
  // Do your magic here...
}, [embla])

<div className="embla__container">
  {slides.map((slide, index) => {
    <div className="embla__slide" onClick={() => onSlideClick(index)}>
      ...
    </div>
  })}
</div>

它是如何工作的

如果指针触摸，Embla 将：

• 当手势是拖动移动时防止点击。
• 在滚动过程中点击轮播时防止点击。

如果指针是鼠标，Embla 将：

• 当手势是拖动移动时防止点击。
• 在滚动过程中点击轮播时不阻止点击。

这种设计选择背后的原因是触摸指针滚动文档。当文档在触摸设备上原生滚动时，它会阻止点击，直到用户停止滚动并在完成后再次点击。

但鼠标指针不用于滚动文档，除非您拖动滚动条。而且，如果您拖动滚动条，它将防止您意外单击网页上的任何内容，因为指针位于滚动条区域内。所以这里的假设是我们可以更加确定鼠标指针的点击是有意的。

链接

• embla.clickAllowed()here 的 API 参考。
• 文档网站here 上有关如何使用 Embla 实现点击事件的指南。