时间戳

首页 > 解决方案 > GliderJS如何在轮播中的特定索引处添加项目？

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

问题描述

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

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

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

const elementHTML = "somehtml";
const element = document.createElement("div");
element.innerHTML = elementHTML;

glider.addItem(element);

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

标签： javascriptcarousel

解决方案

没有公开的 api 专门执行此操作。但是，您可以更改 glider 和 call 的内容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>

推荐阅读