如何在Elementor Pro中用JavaScript动态初始化Swiper.JS实现移动端滑块

1 核心问题根因 #

你遇到的问题主要由3个常见配置错误导致：

• Swiper容器属性错位：你把overflow: hidden加在了作为Swiper Wrapper的.elementor-container上，而该属性应该加在外层Swiper容器（#summary）上，Wrapper需要完整宽度做平移动画，不能被截断
• Elementor默认样式优先级高于自定义CSS：.elementor-col-33在移动端的默认33%宽度规则覆盖了你写的100%宽度，导致三列挤在一屏同时显示
• 部分Swiper依赖属性被Elementor默认规则覆盖：比如Wrapper的flex-wrap: nowrap未生效，列依然会自动换行

2 分步修复代码 #

2.1 替换custom.css代码 #

@media screen and (max-width: 1023px) {
    /* 外层Swiper容器加overflow，隐藏超出的滑块 */
    #summary {
        overflow: hidden !important;
    }
    /* Wrapper配置，优先级足够高覆盖Elementor默认规则 */
    #summary .elementor-container {
        width: 100% !important;
        height: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        transition-property: transform !important;
        box-sizing: content-box !important;
        padding: 0 !important;
    }
    /* 滑块（列）配置，覆盖默认33%宽度 */
    #summary .elementor-container .elementor-column {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        position: relative !important;
        transition-property: transform !important;
        /* 垂直居中保留 */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

注意：把媒体查询阈值改成1023px，和Swiper断点1024px对应，避免不同宽度下的样式冲突

2.2 替换custom.js代码 #

// 等待Elementor前端内容完全渲染后再初始化Swiper，避免DOM未加载完成导致的初始化异常
document.addEventListener('DOMContentLoaded', function() {
    // 如果是Elementor编辑器预览模式，不初始化滑块避免编辑器异常
    if (document.body.classList.contains('elementor-editor-active')) return;

    var mySwiper = new Swiper('#summary', {
        slidesPerView: 1,
        spaceBetween: 10,
        slideClass: 'elementor-column',
        wrapperClass: 'elementor-container',
        // 关闭自动高度，避免内容高度不一致导致跳动
        autoHeight: false,
        breakpoints: {
            // Swiper断点默认是min-width，即>=对应宽度时生效
            1024: {
                slidesPerView: 3,
                spaceBetween: 0,
                // 大于等于1024px时禁用Swiper滑动，保持正常三列布局
                enabled: false
            }
        }
    });
});

优化点：增加桌面端禁用Swiper的配置，避免桌面端出现不必要的滑动交互，同时删除了冗余的768、640断点配置，默认的移动端参数已经适配所有小于1024px的设备

2.3 修复functions.php的CSS加载路径 #

你当前的CSS加载代码路径写错了，get_template_directory_uri()不需要传入参数，需要手动拼接路径：

// 假设custom.css放在Hello主题根目录，如果你放在assets/css目录下，路径改为'/assets/css/custom.css'
wp_enqueue_style('custom', get_template_directory_uri() . '/custom.css');
// JS加载代码没问题，保留即可
wp_enqueue_script( 'custom', get_theme_file_uri( 'assets/js/custom.js' ), ['jquery', 'swiper'], '', true );

3 生效验证 #

修改完成后清空WordPress缓存、浏览器缓存，在移动端打开页面验证：

• 小于1024px宽度时只显示1个列，左右滑动可以切换另外两列
• 大于等于1024px宽度时自动恢复三列布局，无滑动功能

内容的提问来源于stack exchange，提问作者Kamil Cierczek