如何先旋转图像，然后在图像滑块中平移它

Question

我正在尝试构建一个图像滑块，其中当按下上一个或下一个按钮时，我的图像滑块首先旋转 180 度，然后平移图像的宽度以显示下一个/上一个图像。

我无法让它工作，我认为我可能需要一个使用异步/等待函数的解决方案，我现在真的不太擅长。我尝试编写一个异步函数，但无法正确完成。

也许有人可以告诉我解决这个问题的方法？

const container = document.querySelectorAll('.image-container')
const prevBtn = document.querySelector('.prev')
let counter = 0

prevBtn.addEventListener('click', moveSlide)

function moveSlide() {
  counter++
  container.forEach((image, index) => {
    let width = image.getBoundingClientRect().width
    image.style.transform = `rotateY(180deg)`
    setTimeout(() => {
      image.style.transform = `translate(-${counter*width}px`
    }, 450)

  })
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.slider-container {
  height: 50vh;
  width: 300px;
  display: flex;
  margin: auto;
  flex-direction: row;
  overflow: hidden;
}

.image-container {
  display: block;
  width: 300px;
  transition: transform 450ms ease;
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 5px;
}

.btn-container .btn {
  width: 15vw;
  padding: 5px;
}

<div class="wrapper">
  <div class="slider-container">
    <div class="image-container">
      <img src="https://picsum.photos/id/237/300/200" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/seed/picsum/300/200" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/300/200?grayscale" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/300/200/?blur" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/id/870/300/200?grayscale&blur=2" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/id/1/300/200" alt="">
    </div>
  </div>
  <div class="btn-container">
    <button class="btn prev">Previous</button>
    <button class="btn next">Next</button>
  </div>
</div>

Answer 1

有 2 个问题。在您的代码中，您同时旋转了图像的所有容器。这导致它们全部向左收缩。其他问题 - 您不需要旋转容器，而是旋转其中的

img

。因此，我将

transition

属性添加到

.image-container img

并确保旋转图像。

此外，最好使用事件而不是超时来检测转换何时结束。我没有去那里。另外，请考虑使用库来完成此常见任务。

const container = document.querySelectorAll('.image-container')
const prevBtn = document.querySelector('.prev')
let counter = 0

prevBtn.addEventListener('click', moveSlide)

function moveSlide() {
  counter++

  image = document.querySelector(".image-container:nth-child(" + counter + ") img")
  image.style.transform = `rotateY(180deg)`
  image.style.border = "2px solid red"

  container.forEach((image, index) => {
    let width = image.getBoundingClientRect().width

    setTimeout(() => {
      image.style.transform = `translate(-${counter*width}px`
    }, 450)

  })
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.slider-container {
  height: 50vh;
  width: 300px;
  display: flex;
  margin: auto;
  flex-direction: row;
  overflow: hidden;
}

.image-container,
.image-container img {
  display: block;
  width: 300px;
  transition: transform 450ms ease;
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 5px;
}

.btn-container .btn {
  width: 15vw;
  padding: 5px;
}

<div class="wrapper">
  <div class="slider-container">
    <div class="image-container">
      <img src="https://picsum.photos/id/237/300/200" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/seed/picsum/300/200" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/300/200?grayscale" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/300/200/?blur" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/id/870/300/200?grayscale&blur=2" alt="">
    </div>
    <div class="image-container">
      <img src="https://picsum.photos/id/1/300/200" alt="">
    </div>
  </div>
  <div class="btn-container">
    <button class="btn prev">Previous</button>
    <button class="btn next">Next</button>
  </div>
</div>