另一种滑块效果

element.append 在当前 Element 的最后一个子节点之后插入一组 Node 对象或字符串对象
element.prepend 可以在父节点的第一个子节点之前插入一系列 Node 对象或者 DOMString 对象

INFO

append和prepend方法都可以在父节点下添加子节点，但是当已经有的子节点再调用这两个方法，只是把其位置给追加到末尾或放到首位，并不会额外添加新的节点。

查看代码

vue

<template>
  <div class="container">
    <div class="slider">
      <img src="https://s21.ax1x.com/2024/10/21/pAaoXmd.jpg" />
      <img src="https://s21.ax1x.com/2024/10/21/pAaoLOH.jpg" />
      <img src="https://s21.ax1x.com/2024/10/21/pAaoq6e.jpg" />
      <img src="https://s21.ax1x.com/2024/10/21/pAaoblD.jpg" />
    </div>

    <div class="arrows">
      <button class="prev" @click="doPrev"><</button>
      <button class="next" @click="doNext">></button>
    </div>
  </div>
</template>
<script lang="ts" setup>
const doPrev = () => {
  const slider = document.querySelector('.slider')
  // @ts-ignore
  slider?.prepend(slider.querySelector('img:last-child'))
}
const doNext = () => {
  const slider = document.querySelector('.slider')
  // @ts-ignore
  slider?.append(slider.querySelector('img:first-child'))
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  .slider {
    img:not(img:first-child) {
      display: none;
    }
  }
  .arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    button {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7);
      border: none;
      cursor: pointer;

      font-size: 20px;
    }
  }
}
</style>

另一种滑块效果 ​

另一种滑块效果