类似分页的东西

Question

我想要一个div并且里面div还有其他div元素。在左侧和右侧将有一个上一个和下一个按钮。当我单击右键时，“div”容器内的元素将向左移动指定数量的像素。这种实现是如何调用的？它的词是什么？它不称为分页或图库滑块。

Answer 1

这并不难，但您需要了解 Shadow DOM 是什么以及如何创建自定义元素。您所指的是 Web 组件（Shadow DOM 和自定义元素）。该功能似乎与通常所说的“轮播”一致。这是 Web Components 的一个很好的参考。如果我理解正确，我认为最终产品应该是这样的。

这是 GutHub 的链接，带有使用 Web 组件规范构建的轮播

<custom-div>

    // child <div>'s

</custom-div>

然后你需要使用自定义元素规范在 JS 中定义你的自定义元素。

class customDiv extends HTMLElement {

    constructor() {

        super()

        this.attachShadow({

            mode: 'open'

        })

    }

    connectedCallback() {

        let template = document.createElement('template')

        template.innerHTML = `

<style>

    // your custom element styles

</style>

<div>

    <slot name="1"></slot> // this is where the slotted divs in your HTML end up

    <slot name="2"></slot>

    <slot name="3"></slot>

</div>`

        this.shadowRoot.appendChild(template.content.cloneNode(true))

    }

}

customElements.define('customElement', customDiv)

然后我们可以回到 HTML 并添加<div>元素。您可以slots向<div>元素添加名称以定义它们在自定义元素中的位置。

<custom-div>

    <div slot="1">Content 1</div>

    <div slot="2">Content 2</div>

    <div slot="3">Content 3</div>

</custom-div>

从这里你可以像任何其他画廊一样实现画廊滑块，就在 web 组件内部。