【发布时间】：2021-11-28 10:51:36
【问题描述】：
我正在使用 Elementor Pro 和 Hello Theme 构建简单的单页布局网站。我有一个问题。网站上的部分是用 3 列布局构建的。在桌面上看起来不错，但在移动设备上我更愿意将此部分显示为滑块。我发现 Elementor 使用 SwiperJS 作为滑块。这是我必须在移动设备上变成滑块的代码：
<section class="elementor-section elementor-inner-section elementor-element elementor-element-53777fe3 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="53777fe3" data-element_type="section" id="summary">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-145d728 animated bounceInLeft" data-id="145d728" data-element_type="column" data-settings="{"animation":"bounceInLeft"}">( content of column/slide )</div>
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-4c151e67 animated bounceInLeft" data-id="4c151e67" data-element_type="column" data-settings="{"animation":"bounceInLeft"}">( content od column/slide )</div>
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-53280d85 animated bounceInLeft" data-id="53280d85" data-element_type="column" data-settings="{"animation":"bounceInLeft"}"></div>
</div>
</section>
如您所见，我将 id #summary 添加到部分。然后我创建了自定义 js 和 css 文件并手动上传。
custom.js：
var mySwiper = new Swiper('#summary', {
slidesPerView: 1,
spaceBetween: 10,
slideClass: 'elementor-column',
wrapperClass: 'elementor-container',
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 20,
},
768: {
slidesPerView: 1,
spaceBetween: 40,
},
1024: {
slidesPerView: 3,
spaceBetween: 0,
},
}
});
custom.css：
@media screen and (max-width: 768px) {
#summary .elementor-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
#summary .elementor-container {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
#summary .elementor-container .elementor-column {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
}
然后我修改了functions.php并加载了我的文件：
wp_enqueue_script( 'custom', get_theme_file_uri( 'assets/js/custom.js' ), ['jquery', 'swiper'], '', true );
wp_enqueue_style('custom', get_template_directory_uri('custom.css'));
所以我认为一切看起来都不错。效果如何？
- 我的文件 custom.js 和 custom.css 已正确加载。
- swiper.js 在 custom.js 之前加载。
- section 标签有新类 .swiper-container-initialized 和 .swiper-container-horizontal
- 具有 elementor-column 类的第一个 div 标签具有新类 .swiper-slide-active
- 具有 elementor-column 类的第二个 div 标签具有新类 .swiper-slide-next
所以 Swiper 正确初始化，但仍然在移动设备上，所有 3 个元素都可见且没有滑块。
请帮我解决这个问题。
亲切的问候， 卡米尔
【问题讨论】：
标签： javascript wordpress swiper elementor swiperjs