WordPress 中的轮播问题店面主题

编程问答 2022-05-10

问题描述

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

您可以在此处实时查看问题（橙色按钮下的轮播，仅适用于小于 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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptswiperswiperwordpresswordpress