你也可以禁用默认的导航按钮（也就是“箭头”），直接将事件附加到你的自定义按钮上。

document.addEventListener('DOMContentLoaded', function() {

  let splide = new Splide('#image-carousel', {
    // hide default buttons
    arrows: false,
    type: 'loop',
  }).mount();

  //attach events to custom buttons
  btnNext.addEventListener('click', e => {
    splide.go('+1')
  })

  btnPrev.addEventListener('click', e => {
    splide.go('-1')
  })

});

.splide {
  width: 50vh;
  margin: 0 auto;
}

.splide__slide img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
}

<script src="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
" rel="stylesheet">

<p><button id="btnPrev">prev</button> <button id="btnNext">next</button></p>

<section id="image-carousel" class="splide" aria-label="Beautiful Images">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="https://picsum.photos/id/237/200/300" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://picsum.photos/id/236/200/300" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://picsum.photos/id/235/200/300" alt="">
      </li>
    </ul>
  </div>
</section>

另请参阅官方API documentation和关于customizing arrows

可能有更优雅的方法来做到这一点，但我只是结束了在splide中包含箭头，将它们设置为display:none，然后添加一些JQuery，以便splide外部的按钮在隐藏的按钮上执行单击功能。

<!--  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 - delivering value for organisations and individuals</p>
                        </div>
                        <div class="col-3 ml-4 mt-1" style="position:relative; height: 25px;">
                            <div class="splide__arrows">
                                <button class="splide__arrow splide__arrow--prev" id="mobile-test-prev" style="background-color:#ffffff;" type="button" aria-controls="testim-carousel-track" aria-label="Go to last slide">
                                    <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>
                                <button class="splide__arrow splide__arrow--next" id="mobile-test-next"style="background-color:#ffffff;" type="button" aria-controls="testim-carousel-track" aria-label="Next slide">
                                    <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 md:-ml-40" id="mobile-testim-carousel">
                                <div class="splide__arrows">
                                    <button class="splide__arrow splide__arrow--prev" id="hide-mobile-prev" style="display:none;" type="button" aria-controls="testim-carousel-track" aria-label="Go to last slide">
                                        <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>
                                    <button class="splide__arrow splide__arrow--next" id="hide-mobile-next" style="display:none;" type="button" aria-controls="testim-carousel-track" aria-label="Next slide">
                                        <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 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 | Manager Coordination </p>
                                                        <p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>
                                                    </div>
                                                    <div class="col-12 pt-3">
                                                        <p class="text-xs font-normal">I’ve worked in the public sector, across several agencies, for over 25 years. During this time, I have had several touch points with economic concepts without any real understanding of the broader economics framework. This online course filled in those gaps for me in a way that sustained my interest and allowed me to incorporate the learning into my existing workload. While going through the course, I had many ‘aha’ moments which cumulated in solid foundation in economics concepts.</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 | Manager Coordination </p>
                                                        <p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>
                                                    </div>
                                                    <div class="col-12 pt-3">
                                                        <p class="text-xs font-normal">I’ve worked in the public sector, across several agencies, for over 25 years. During this time, I have had several touch points with economic concepts without any real understanding of the broader economics framework. This online course filled in those gaps for me in a way that sustained my interest and allowed me to incorporate the learning into my existing workload. While going through the course, I had many ‘aha’ moments which cumulated in solid foundation in economics concepts.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <p>&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>

而JS…

new Splide('#mobile-testim-carousel', {type:'loop', arrows: true, rewind: true, pagination: false, autoplay: false, perPage: 1, gap:'1em'}).mount(); 

$(document).ready(function () {
            $('#mobile-test-prev').click(function() {
                $('#hide-mobile-prev').click();
            });

            $('#mobile-test-next').click(function() {
                $('#hide-mobile-next').click();
            });
        })