如何解决WordPress 中的轮播问题店面主题
我正在为我的商店使用 Woocommerce Storefront 主题,我的目标是添加带有图像的简单、可拖动的免费轮播。我尝试使用 Swiper
库来做到这一点,当我在纯 html、css 和 js 中测试我的代码时,一切正常。但是,当我将代码放入 functions.PHP
中的 Storefront hooks 时,carousel 不起作用。我尝试了另一个轮播库 - Embla
,但问题仍然存在。轮播显示正常,但无法移动幻灯片(在单击和移动鼠标事件期间幻灯片正在拖动,但在移动鼠标单击或触摸后会弹回起始位置)。
您可以在此处实时查看问题(橙色按钮下的轮播,仅适用于小于 768 像素的视口):
我怀疑原因可能是 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 举报,一经查实,本站将立刻删除。