使用template标签动态插入DOM后Splide滑块无法正常工作求助

问题背景 #

使用<template>标签动态渲染卡片的画廊，集成Splide滑块后卡片能正常显示，但滑块箭头不可点击，DOM结构无明显错误，对比项目内其他滑块未定位到问题。

相关代码 #

HTML结构 #

<div class="splide bicycles__gallery" aria-label="Слайдер с карточками велосипедов" role="group" id="bicyclesSlider">
  <div class="splide__track">
    <div class="splide__list"></div>
  </div>
</div>

<template class="bicycles__card-template">
  <article class="splide__slide bicycles__gallery-card">
    <a href="" target="_blank" class="bicycles__gallery-link">
      <img src="#" alt="" class="bicycles__gallery-image">
    </a>
    <h3 class="bicycles__gallery-image-caption" lang="en"></h3>
  </article>
</template>

JavaScript代码 #

const galleryBicycles = document.querySelector('.bicycles__gallery');
const galleryBicyclesSlider = galleryBicycles.querySelector('.splide__list');
const cardTemplateBicycle = document.querySelector('.bicycles__card-template').content;

const bicyclesSlider = new Splide('.bicycles__gallery', {
  type: 'loop',
  perPage: 3,
  perMove: 1,
  pagination: false,
  speed: 800,
  drag: false,
  keyboard: 'focused',
  autoWidth: true,
  autoHeight: true,
  gap: 40,
    breakpoints: {
      770: {
        perPage: 1,
        keyboard: false,
      }
    }
}).mount();

function createCardBicycle(card) {
  const cardItem = cardTemplateBicycle.cloneNode(true);
  const cardContent = cardItem.querySelector('.bicycles__gallery-card');
  // ... 卡片内容填充逻辑
  return cardItem;
 }

function renderCardsBicycles(key) {
  Object.values(initialCardsBicycles[key]).forEach(card => {
    galleryBicyclesSlider.append(createCardBicycle(card));
  });
}

window.onload = () => {
  renderCardsBicycles(Object.keys(initialCardsBicycles)[0]);
}

问题根源 #

Splide初始化时机过早：代码中先实例化并挂载了Splide，但此时splide__list容器内还没有任何splide__slide元素。Splide在初始化时会扫描现有滑块元素来计算数量、尺寸等关键参数，没有滑块元素会导致箭头控件无法绑定有效交互逻辑，最终表现为不可点击。

解决方案 #

有两种可行的修复方式：

方式一：延迟滑块初始化，待卡片渲染完成后再执行 #

将Splide的实例化和挂载逻辑移到卡片渲染完成之后，确保初始化时滑块元素已存在：

window.onload = () => {
  renderCardsBicycles(Object.keys(initialCardsBicycles)[0]);
  
  // 卡片渲染完成后初始化滑块
  const bicyclesSlider = new Splide('.bicycles__gallery', {
    type: 'loop',
    perPage: 3,
    perMove: 1,
    pagination: false,
    speed: 800,
    drag: false,
    keyboard: 'focused',
    autoWidth: true,
    autoHeight: true,
    gap: 40,
    breakpoints: {
      770: {
        perPage: 1,
        keyboard: false,
      }
    }
  }).mount();
}

方式二：先初始化滑块，渲染卡片后手动刷新 #

如果需要保持滑块提前初始化的逻辑，可在卡片渲染完成后调用Splide的refresh()方法，强制重新扫描滑块元素并更新控件状态：

// 保留原滑块初始化代码
const bicyclesSlider = new Splide('.bicycles__gallery', {
  // ... 配置项
}).mount();

window.onload = () => {
  renderCardsBicycles(Object.keys(initialCardsBicycles)[0]);
  // 刷新滑块状态
  bicyclesSlider.refresh();
}

额外注意事项 #

• 确认autoWidth和perPage的组合是否符合需求：当开启autoWidth时，perPage的实际表现可能受滑块自身宽度影响，若出现布局异常可尝试调整这两个配置。
• 检查Splide的CSS文件是否正确引入：箭头控件的样式和交互依赖官方CSS，缺失可能导致箭头不显示或无法点击。

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