类似分页的东西

Question

我想要一个div并且里面div还有其他div元素。在左侧和右侧将有一个上一个和下一个按钮。当我单击右键时，“div”容器内的元素将向左移动指定数量的像素。

这种实现是如何调用的？它的词是什么？它不称为分页或图库滑块。

Answer 1

这并不难，但您需要了解 Shadow DOM 是什么以及如何创建自定义元素。您所指的是 Web 组件（Shadow DOM 和自定义元素）。该功能似乎与通常所说的“轮播”一致。这是 Web Components 的一个很好的参考。如果我理解正确，我认为最终产品应该是这样的。这是 GutHub 的链接，带有使用 Web 组件规范构建的轮播<custom-div>&nbsp; &nbsp; // child <div>'s</custom-div>然后你需要使用自定义元素规范在 JS 中定义你的自定义元素。class customDiv extends HTMLElement {&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; super()&nbsp; &nbsp; &nbsp; &nbsp; this.attachShadow({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mode: 'open'&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; connectedCallback() {&nbsp; &nbsp; &nbsp; &nbsp; let template = document.createElement('template')&nbsp; &nbsp; &nbsp; &nbsp; template.innerHTML = `<style>&nbsp; &nbsp; // your custom element styles</style><div>&nbsp; &nbsp; <slot name="1"></slot> // this is where the slotted divs in your HTML end up&nbsp; &nbsp; <slot name="2"></slot>&nbsp; &nbsp; <slot name="3"></slot></div>`&nbsp; &nbsp; &nbsp; &nbsp; this.shadowRoot.appendChild(template.content.cloneNode(true))&nbsp; &nbsp; }}customElements.define('customElement', customDiv)然后我们可以回到 HTML 并添加<div>元素。您可以slots向<div>元素添加名称以定义它们在自定义元素中的位置。<custom-div>&nbsp; &nbsp; <div slot="1">Content 1</div>&nbsp; &nbsp; <div slot="2">Content 2</div>&nbsp; &nbsp; <div slot="3">Content 3</div></custom-div>从这里你可以像任何其他画廊一样实现画廊滑块，就在 web 组件内部。