Splide滑块移动端启用大屏销毁后，splide__list样式覆盖Flexbox问题

针对移动端保留滑块、大屏采用Flexbox布局的需求，以下几种方案可解决销毁滑块后splide__list被强制设置为display: block的问题：

方案1：销毁时手动移除is-initialized类 #

Splide的destroy('completely')操作可能未移除is-initialized类，导致目标CSS规则仍生效。可在销毁回调中手动移除该类：

// 假设已初始化splide实例
splide.on('destroy', () => {
  splide.root.classList.remove('is-initialized');
});

// 销毁滑块时调用
splide.destroy('completely');

移除is-initialized后，.splide.is-initialized:not(.is-active) .splide__list选择器不再匹配，splide__list的display属性会恢复到自定义的Flexbox设置。

方案2：用媒体查询覆盖大屏样式 #

针对大屏断点，编写优先级更高的CSS规则，强制splide__list使用Flex布局：

/* 替换768px为你的大屏断点阈值 */
@media (min-width: 768px) {
  /* 覆盖Splide的强制block规则 */
  .splide.is-initialized:not(.is-active) .splide__list {
    display: flex !important;
    /* 添加你的Flex布局属性，比如： */
    gap: 1rem;
    flex-wrap: wrap;
  }
}

若不想使用!important，可给Splide根元素添加自定义类（如flex-mode），用更具体的选择器实现：

@media (min-width: 768px) {
  .splide.flex-mode .splide__list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
}

然后在销毁滑块时给根元素添加该类，初始化时移除：

// 大屏模式下销毁滑块并启用Flex布局
splide.destroy('completely');
splide.root.classList.add('flex-mode');

// 移动端模式下初始化滑块并移除Flex类
splide.mount();
splide.root.classList.remove('flex-mode');

方案3：销毁后手动重置样式 #

在销毁滑块的逻辑中，直接给splide__list设置行内样式，覆盖CSS规则：

function handleBreakpointChange() {
  const isMobile = window.innerWidth < 768;
  const listElement = splide.root.querySelector('.splide__list');

  if (isMobile) {
    if (!splide.isInitialized) {
      splide.mount();
      listElement.style.display = ''; // 恢复滑块默认样式
    }
  } else {
    if (splide.isInitialized) {
      splide.destroy('completely');
      listElement.style.display = 'flex'; // 强制设置Flex布局
      // 可选：添加Flex相关样式
      listElement.style.gap = '1rem';
      listElement.style.flexWrap = 'wrap';
    }
  }
}

// 监听窗口 resize
window.addEventListener('resize', handleBreakpointChange);
// 页面加载时执行一次
handleBreakpointChange();

这种方式直接绕过Splide的CSS影响，适合快速解决问题的场景。

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