如何在WordPress（Divi主题）中修复Swiper滑块失效问题

让我们一步步排查你代码里的问题，帮你修复滑块：

1. 移除重复资源加载，避免脚本冲突 #

你现在同时在functions.php和头部代码里引入了Swiper的JS和CSS，重复加载会引发脚本冲突，这是滑块失效的核心原因之一。

修复functions.php代码： #

先删掉头部里所有Swiper相关的CSS和JS引入代码，然后修改functions.php：

/** 加载Swiper资源 **/
function swiper_magic() {
    // 加载Swiper压缩版CSS
    wp_enqueue_style('swiper-css', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css');
    // 加载Swiper压缩版JS，依赖jQuery，指定在页脚加载
    wp_enqueue_script('swiper-js', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js', array('jquery'), '4.5.0', true);
}
add_action('wp_enqueue_scripts', 'swiper_magic');

注意：你之前代码里的my_scripts_method钩子没有对应函数，直接删掉即可；把脚本放在页脚加载能避免DOM未就绪的问题。

2. 修正Swiper 4.x的初始化语法 #

Swiper 4.x的API和旧版本有不少变化，你用的部分参数和方法已经过时：

修复JS初始化代码： #

替换头部里的Swiper脚本为：

jQuery(document).ready(function($){
    var mySwiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.pagination', // 正确指定分页器元素
            clickable: true // 替代旧版的paginationClickable参数
        },
        loop: true,
        grabCursor: true,
        // 用内置导航配置替代手动绑定点击事件
        navigation: {
            nextEl: '.arrow-right',
            prevEl: '.arrow-left'
        }
    });
});

关键点：

• Swiper 4.x中swipePrev()和swipeNext()已更名为slidePrev()和slideNext()，但更推荐用内置的navigation配置自动绑定导航按钮
• 用jQuery(document).ready(function($){...})可以在回调里直接用$代替jQuery，避免Divi自带的jQuery冲突

3. 补充基础CSS样式解决排版问题 #

图片靠左无法滑动，大概率是Swiper容器和幻灯片的基础样式缺失，添加以下CSS到Divi的主题自定义CSS面板（Divi -> Theme Options -> General -> Custom CSS）：

/* 确保滑块容器和幻灯片宽度正常 */
.swiper-container {
    width: 100%;
    max-width: 1200px; /* 可根据需求调整 */
    height: auto;
    margin: 0 auto;
}
.swiper-slide {
    width: 100%;
}
.swiper-slide img {
    width: 100%;
    height: auto;
}

/* 导航按钮和分页器的基础样式（可选） */
.device {
    position: relative; /* 让导航按钮的绝对定位生效 */
}
.arrow-left, .arrow-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    color: white;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
}
.arrow-left {
    left: 10px;
}
.arrow-right {
    right: 10px;
}
.pagination {
    text-align: center;
    margin-top: 20px;
}
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}
.swiper-pagination-bullet-active {
    background: #000;
}

4. 调整HTML结构的细节 #

你的HTML结构基本没问题，只需给.device容器添加相对定位（上面CSS已经包含，也可以直接写在HTML里）：

<div class="device">
    <a class="arrow-left" href="#"></a>
    <a class="arrow-right" href="#"></a>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="/images/slider1-1.png">
            </div>
            <div class="swiper-slide">
                <img src="/images/slider1-2.png">
            </div>
            <div class="swiper-slide">
                <div class="content-slide">
                    <p class="title">Slide with HTML</p>
                    <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pagination"></div>
</div>

按照以上步骤修改后，Swiper滑块应该就能正常拖拽滑动了。如果还有问题，可以打开浏览器开发者工具（F12）查看Console面板的报错信息，这会帮你进一步定位问题。

内容的提问来源于stack exchange，提问作者Quach Aqua