如何将Swiper滑块箭头置于分页圆点两侧？JS实现求助

我有一个带圆点分页和箭头导航的Swiper滑块，希望将箭头放置在分页圆点的两侧。最初用CSS实现，但在不同屏幕下布局混乱且偏移。

分页圆点HTML代码 #

<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 5" aria-current="true"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span></div>

箭头导航HTML代码 #

<div class="elementor-swiper-button elementor-swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-4710f9d6dce1fd1c3" aria-disabled="false">
<i aria-hidden="true" class="eicon-chevron-left"></i> <span class="elementor-screen-only">Previous</span>
</div>
<div class="elementor-swiper-button elementor-swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-4710f9d6dce1fd1c3" aria-disabled="false">
<i aria-hidden="true" class="eicon-chevron-right"></i> <span class="elementor-screen-only">Next</span>
</div>

尝试过的无效JS代码 #

<script>
    function insertAfter(referenceNode, newNode) {
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }
    let elem = document.getElementByClassName("swiper-pagination");
    let div = document.getElementByClassName("elementor-swiper-button-next");
    insertAfter(div, elem);
  </script>

问题分析与修正方案 #

原JS代码存在两个核心错误：

1. 方法名拼写错误：getElementByClassName应为getElementsByClassName，且该方法返回HTMLCollection集合，需通过[0]获取第一个匹配元素
2. 逻辑不完整：只处理了下一页箭头，未处理上一页箭头，且未确保DOM加载完成后执行代码

修正后的JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取目标元素
  const pagination = document.getElementsByClassName('swiper-pagination')[0];
  const prevBtn = document.getElementsByClassName('elementor-swiper-button-prev')[0];
  const nextBtn = document.getElementsByClassName('elementor-swiper-button-next')[0];

  // 将上一页箭头插入到分页容器前方
  pagination.parentNode.insertBefore(prevBtn, pagination);
  // 将下一页箭头插入到分页容器后方
  pagination.parentNode.insertBefore(nextBtn, pagination.nextSibling);
});

配套CSS样式（确保跨屏幕布局稳定） #

/* 箭头与分页的父容器，需根据实际DOM结构调整类名 */
.swiper-nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* 箭头与分页的间距 */
  flex-wrap: nowrap; /* 防止换行 */
}

/* 箭头按钮固定尺寸，避免压缩变形 */
.elementor-swiper-button {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 分页容器禁止压缩 */
.swiper-pagination {
  flex-shrink: 0;
}

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