Elfsight轮播滑块：能否实现分页悬停触发及幻灯片样式修改？

核心结论 #

Elfsight轮播滑块的官方默认功能中，没有内置支持分页项悬停自动跳转对应幻灯片，也没有直接修改「已访问」幻灯片文本颜色的配置选项，官方公开文档中也未提及相关功能入口。

自定义实现方案 #

如果需要这两个功能，可以通过自定义代码注入实现（Elfsight组件通常支持在设置中添加自定义CSS/JS）：

1. 分页悬停触发幻灯片跳转

通过监听分页项的鼠标悬停事件，触发对应幻灯片的切换动作：

document.addEventListener('DOMContentLoaded', () => {
  const observer = new MutationObserver((mutations) => {
    const paginationItems = document.querySelectorAll('.e-slider-pagination-item');
    if (paginationItems.length) {
      paginationItems.forEach(item => {
        item.addEventListener('mouseover', () => item.click());
      });
      observer.disconnect();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
});

注：代码中的类名需根据组件实际渲染的DOM结构调整，可通过浏览器开发者工具查看元素类名。

2. 修改已访问幻灯片的文本颜色

先通过JS标记已切换过的分页项，再用CSS设置颜色：

/* 自定义已访问分页项的文本颜色 */
.e-slider-pagination-item.visited {
  color: #2ecc71; /* 替换为你需要的颜色值 */
}

document.addEventListener('DOMContentLoaded', () => {
  const observer = new MutationObserver((mutations) => {
    const slider = document.querySelector('.e-slider');
    if (slider) {
      slider.addEventListener('transitionend', () => {
        const activeItem = document.querySelector('.e-slider-pagination-item.active');
        activeItem?.classList.add('visited');
      });
      observer.disconnect();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
});

注意事项 #

• 若组件使用Shadow DOM隔离DOM结构，上述代码可能无法直接生效，需调整逻辑或联系Elfsight支持团队获取适配方案。
• 不同版本的Elfsight组件类名可能有差异，需以实际渲染结果为准。

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