如何让外置的SplideJS箭头正常控制轮播切换？

我正在开发基于Bootstrap 5的移动端页面，集成了Splide轮播组件。出于设计考量，将切换箭头放在Splide组件外部比调整内置箭头位置更简便，但目前外置箭头无法触发轮播切换，不清楚需绑定哪些事件实现滑动功能。

注：站点主要使用Bootstrap 5，同时用到了Tailwind的边距、内边距类。

页面效果：页面顶部为标题与外置箭头区域，下方是Splide轮播卡片

要实现外置箭头控制Splide轮播，只需获取Splide实例并给箭头绑定点击事件，调用实例的切换方法即可，具体步骤如下：

1. 保存Splide实例到变量，方便后续调用切换方法
2. 给外置的上/下页箭头绑定点击事件，触发实例对应的切换动作

修改后的代码 #

HTML部分（给箭头添加自定义类）

<!--  Mobile Display start -->
<div class="row d-md-none">
    <div class="col-12 bg-white">
        <div class="row">
            <div class="col-6">
                <img class="" style="width:75%;" src="Assets/CEDA-Dots_1.png" alt="ceda_dots">
            </div>
            <div class="col-6">
                <img class="-mt-4 mx-auto" style="height:75%;" src="Assets/Qotes.png" alt="quotes">
            </div>
            <div class="col-10 pl-4 pb-2 -mt-8">
                <p class="text-2xl font-medium pl-5">CEDA Learning - 为企业和个人传递价值</p>
            </div>
            <div class="col-3 ml-4" style="position:relative; height: 25px;">
                <div class="splide__arrows">
                    <!-- 添加自定义类custom-splide-prev -->
                    <button class="splide__arrow splide__arrow--prev custom-splide-prev" style="background-color:#ffffff;" type="button" aria-controls="mobile-testim-carousel-track" aria-label="切换到上一张">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
                            <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
                        </svg>
                    </button>
                    <!-- 添加自定义类custom-splide-next -->
                    <button class="splide__arrow splide__arrow--next custom-splide-next" style="background-color:#ffffff;" type="button" aria-controls="mobile-testim-carousel-track" aria-label="切换到下一张">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
                            <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 mt-4" style="background: linear-gradient(90deg, #ffffff 50%, #e11837 50%)">
        <div class="row">
            <div class="col-12">
                <p>&nbsp;</p>
            </div>
            <div class="col-12">
                <div class="splide ml:0" id="mobile-testim-carousel">
                    <div class="splide__track pt-4 pb-4">
                        <ul class="splide__list">
                            <li class="splide__slide splide_width">
                                <div class="container">
                                    <div class="row p-2 bg-white">
                                        <div class="col-2 p-0 pt-2">
                                            <img src="Assets/Portrait/10_Portrait.png" class="w-20">
                                        </div>
                                        <div class="col-10 text-black text-base ps-2 pt-2">
                                            <p class="text-sm font-bold">Anne Finlay | 协调经理</p>
                                            <p class="text-sm font-medium">西澳大利亚州初级产业与区域发展部</p>
                                        </div>
                                        <div class="col-12 pt-3">
                                            <p class="text-xs font-normal">我在公共部门多家机构工作了25年以上。这段时间里，我接触过不少经济概念，但始终没搞懂整体的经济学框架。这个在线课程帮我填补了知识空白，内容既有趣又能让我在现有工作中灵活运用。学习过程中我多次恍然大悟，最终建立了扎实的经济学概念基础。</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="splide__slide splide_width">
                                <div class="container">
                                    <div class="row p-2 bg-white">
                                        <div class="col-2 p-0 pt-2">
                                            <img src="Assets/Portrait/10_Portrait.png" class="w-20">
                                        </div>
                                        <div class="col-10 text-black text-base ps-2 pt-2">
                                            <p class="text-sm font-bold">Anne Finlay | 协调经理</p>
                                            <p class="text-sm font-medium">西澳大利亚州初级产业与区域发展部</p>
                                        </div>
                                        <div class="col-12 pt-3">
                                            <p class="text-xs font-normal">我在公共部门多家机构工作了25年以上。这段时间里，我接触过不少经济概念，但始终没搞懂整体的经济学框架。这个在线课程帮我填补了知识空白，内容既有趣又能让我在现有工作中灵活运用。学习过程中我多次恍然大悟，最终建立了扎实的经济学概念基础。</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <p>&nbsp;</p>
            </div>
        </div>
    </div>
</div>

JavaScript部分（绑定切换事件）

<script>
// 保存Splide实例到变量
const mobileSplide = new Splide('#mobile-testim-carousel', {
    type:'loop', 
    arrows: false, 
    rewind: true, 
    pagination: false, 
    autoplay: false, 
    perPage: 1, 
    gap:'1em'
}).mount(); 

// 绑定上一页切换事件
document.querySelector('.custom-splide-prev').addEventListener('click', () => {
    mobileSplide.prev();
});

// 绑定下一页切换事件
document.querySelector('.custom-splide-next').addEventListener('click', () => {
    mobileSplide.next();
});
</script>

补充说明 #

• mobileSplide.prev() 和 mobileSplide.go('<') 效果完全一致，均可触发上一页切换；mobileSplide.next() 和 mobileSplide.go('>') 对应下一页切换，可根据习惯选择使用。
• 给箭头添加自定义类是为了精准定位元素，避免与Splide内置的箭头类冲突，同时也便于后续的样式调整。
• 如果页面存在多个Splide实例，这种通过变量绑定实例的方式，能确保点击事件精准作用到目标轮播组件上。

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