GliderJS 如何在轮播中的特定索引处添加项目？

Question

我正在使用 gliderJS 创建一个轮播，我需要动态地向其添加和删除项目。

我设法让它与.addItem和.removeItem()方法一起工作，虽然removeItem支持从特定索引中删除，但我在文档中没有看到任何在特定索引处添加Item的方法，有人知道这是否可能吗？

这是到目前为止添加的代码：

const elementHTML = "somehtml";

const element = document.createElement("div");

element.innerHTML = elementHTML;

glider.addItem(element);

这将其添加到轮播的末尾，我想将其添加到特定索引处。

Answer 1

没有公开的 api 专门执行此操作。但是，您可以更改滑翔机的内容并调用refresh，这确实正是该addItem方法的作用：  gliderPrototype.addItem = function (ele) {    var _ = this    _.track.appendChild(ele)    _.refresh(true)    _.emit('add')  }因此理论上，您应该能够将子项添加到轨道中的特定索引并调用刷新，如下所示：const glider = new Glider(document.querySelector('.glider'), {  slidesToShow: 5,  slidesToScroll: 5,  draggable: true})function insertBeforeIndex (element, index) {  glider.track.insertBefore(element, glider.track.children[index])  glider.refresh()}const newElement = document.createElement("div")newElement.innerHTML = "<em>new item</em>"insertBeforeIndex(newElement, 2) // inserts it in 3rd place.box {  border: 2px solid lightblue;}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css"><script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script><div class="glider-contain">  <div class="glider">    <div class="box"> 1 </div>    <div class="box"> 2 </div>    <div class="box"> 3 </div>    <div class="box"> 4 </div>  </div></div>