Javascript WordPress中的旋转木马问题（店面主题）

我正在为我的商店使用Woocommerce店面主题，我的目标是添加带有图像的简单、无拖拽的旋转木马。我试着用Swiper库来实现这一点，当我用纯html、css和js测试我的代码时，一切都很好。然而，当我将代码放在

functions.php

中的店面钩子中时，carousel不起作用。我尝试了另一个carousel库-

Embla

，但问题依然存在。转盘显示正确，但无法移动幻灯片（在单击和移动鼠标事件期间，幻灯片会被拖动，但在移动设备上实现鼠标单击或触摸后，幻灯片会反弹回起始位置）

您可以在此处实时查看问题（橙色按钮下的转盘仅适用于小于768px的视口）：

我怀疑原因可能是店面主题中隐藏了一些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>

当我尝试使用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);

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

const embla = EmblaCarousel(emblaContainer, emblaOptions);