在 splide 之外使用 SplideJS 箭头

Question

我正在构建这个带有幻灯片的引导页面（移动视图）。对于设计来说，将箭头放在幻灯片本身之外比尝试将箭头移动到位要容易得多。\n但是由于箭头位于幻灯片之外，那么它们就不起作用 - 并且我不确定需要触发什么事件才能使其滑动。

\n

\n
• 注意 - 虽然该网站主要是 bootstrap 5，但它也有一些顺风类，例如 padding\\margins（您可能会在代码中注意到这一点）
\n

\n

页面如下所示；\n

\n

<!--  Mobile Display start -->\n            <div class="row d-md-none">\n                <div class="col-12 bg-white">\n                    <div class="row">\n                        <div class="col-6">\n                            <img class="" style="width:75%;" src="Assets/CEDA-Dots_1.png" alt="ceda_dots">\n                        </div>\n                        <div class="col-6">\n                            <img class="-mt-4 mx-auto" style="height:75%;" src="Assets/Qotes.png" alt="quotes">\n                        </div>\n                        <div class="col-10 pl-4 pb-2 -mt-8">\n                            <p class="text-2xl font-medium pl-5">CEDA Learning - delivering value for organisations and individuals</p>\n                        </div>\n                        <div class="col-3 ml-4" style="position:relative; height: 25px;">\n                            <div class="splide__arrows">\n                                <button class="splide__arrow splide__arrow--prev" style="background-color:#ffffff;" type="button" aria-controls="mobile-testim-carousel-track" aria-label="Go to last slide">\n                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">\n                                        <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>\n                                    </svg>\n                                </button>\n                                <button class="splide__arrow splide__arrow--next" style="background-color:#ffffff;" type="button" aria-controls="mobile-testim-carousel-track" aria-label="Next slide">\n                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">\n                                        <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>\n                                    </svg>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class="col-12 mt-4" style="background: linear-gradient(90deg, #ffffff 50%, #e11837 50%)">\n                    <div class="row">\n                        <div class="col-12">\n                            <p>&nbsp;</p>\n                        </div>\n                        <div class="col-12">\n                            <div class="splide ml:0" id="mobile-testim-carousel">\n                                <div class="splide__track pt-4 pb-4">\n                                    <ul class="splide__list">\n                                        <li class="splide__slide splide_width">\n                                            <div class="container">\n                                                <div class="row p-2 bg-white">\n                                                    <div class="col-2 p-0 pt-2">\n                                                        <img src="Assets/Portrait/10_Portrait.png" class="w-20">\n                                                    </div>\n                                                    <div class="col-10 text-black text-base ps-2 pt-2">\n                                                        <p class="text-sm font-bold">Anne Finlay | Manager Coordination </p>\n                                                        <p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>\n                                                    </div>\n                                                    <div class="col-12 pt-3">\n                                                        <p class="text-xs font-normal">I\xe2\x80\x99ve 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 \xe2\x80\x98aha\xe2\x80\x99 moments which cumulated in solid foundation in economics concepts.</p>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </li>\n                                        <li class="splide__slide splide_width">\n                                            <div class="container">\n                                                <div class="row p-2 bg-white">\n                                                    <div class="col-2 p-0 pt-2">\n                                                        <img src="Assets/Portrait/10_Portrait.png" class="w-20">\n                                                    </div>\n                                                    <div class="col-10 text-black text-base ps-2 pt-2">\n                                                        <p class="text-sm font-bold">Anne Finlay | Manager Coordination </p>\n                                                        <p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>\n                                                    </div>\n                                                    <div class="col-12 pt-3">\n                                                        <p class="text-xs font-normal">I\xe2\x80\x99ve 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 \xe2\x80\x98aha\xe2\x80\x99 moments which cumulated in solid foundation in economics concepts.</p>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                        <div class="col-12">\n                            <p>&nbsp;</p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n

\n

当然还有 JS：

\n

<script>\nnew Splide(\'#mobile-testim-carousel\', {type:\'loop\', arrows: false, rewind: true, pagination: false, autoplay: false, perPage: 1, gap:\'1em\'}).mount(); \n</script>\n

\n

Answer 1

您还可以禁用默认导航按钮（也称为“箭头”）并将事件直接附加到自定义按钮。

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 文档和有关自定义箭头的信息