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

问题描述

我正在为我的商店使用 Woocommerce Storefront 主题，我的目标是添加带有图像的简单、无拖动的轮播。我尝试使用库来做到这一点，Swiper当我用纯 html、css 和 js 测试我的代码时，一切正常。但是，当我将代码放入 Storefront hooks in 时functions.php，carousel 不起作用。我尝试了另一个轮播库 - 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);

标签： javascriptcsswordpresswoocommerceswiper

解决方案

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

香草JS

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)
})

反应JS

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>

它是如何在引擎盖下工作的

如果指针是touch，Embla 将：

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

如果指针是mouse，Embla 将：

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

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

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

链接