Swiper addSlide函数bug：添加HTML变为纯文本，求中间插入方案

问题描述 #

使用Swiper的addSlide函数时，传入的HTML内容会被当作纯文本插入，无法解析为HTML元素。即使创建纯净的Swiper实例，该问题依然存在，需要实现能在滑块非首尾位置插入图片或HTML内容的功能。

原代码示例 #

HTML代码 #

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

JS代码 #

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

const slider = document.querySelector('.swiper').swiper;

slider.addSlide(1, '<div class="swiper-slide">Slide 10"</div>')

解决方案 #

addSlide方法直接传入HTML字符串时，默认会作为文本节点处理。要插入可解析的HTML内容，需先创建对应的DOM元素，再传入方法：

修改后的JS代码 #

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

// 创建新的slide DOM元素
const newSlide = document.createElement('div');
newSlide.className = 'swiper-slide';
// 插入图片示例，替换为你的图片地址和描述
newSlide.innerHTML = '<img src="your-image-url" alt="图片描述">';

// 在索引1的位置插入新slide
swiper.addSlide(1, newSlide);

关键说明 #

• 必须传入DOM元素而非HTML字符串，Swiper才能正确解析并渲染内容
• 若需插入纯文本，可直接使用字符串；插入HTML内容则必须通过创建DOM元素的方式
• 插入后Swiper会自动更新滑块状态，无需手动调用额外更新方法

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