带对角线分隔符的图像滑块

Question

我制作了一个包含 5 个图像的滑块容器，用于预览下一个和上一个图像。我唯一的问题是我需要使图像由对角线而不是水平线分隔。

这是我的代码：

const images = document.querySelectorAll(".slider-img")

function clearActiveImage() {
  images.forEach(function(image) {
    image.classList.remove("active-slider");
  });
}

images.forEach(function(image, index) {
  image.onclick = function() {
    event.stopPropagation()
    if (images[index].classList.contains("active-slider")) {
      images[index].classList.remove("active-slider")
    } else {
      clearActiveImage(index)
      images[index].classList.add("active-slider")
    }
  }
})

window.addEventListener("click", () => {
  clearActiveImage()
})

.slider-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 150px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-main {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1.5 / 1;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.slider-main:has(.img.active) .img:not(.active) {
  filter: grayscale(100%)
}

.slider-img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: calc(100% / 5);
  object-fit: cover;
  overflow: hidden;
  border: none;
  transition: all 0.4s cubic-bezier(0.32, 0, 0.67, 0);
  cursor: pointer;
}

.active-slider {
  width: 200%;
}

<div class="slider-container">
  <div class="slider-main">
    <img class="slider-img active-slider" src="https://image.shutterstock.com/image-photo/mountains-fog-beautiful-night-autumn-260nw-1233564241.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/sunset-ruby-beach-260nw-35902396.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/streelights-uttakleiv-village-shine-below-260nw-2333054447.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/twilight-light-over-isolated-sandwood-260nw-2333055437.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/silhouette-young-traveler-watched-star-260nw-1730791102.jpg" alt="">
  </div>
</div>

我已经尝试使用“transform: skewX(-20deg)”，但随后我的整个图像扭曲了。我附上一张它应该是什么样子的图像。

Answer 1

我认为您正在寻找类似this的东西。

它有 2 张图像，由对角线分隔。

Answer 2

您可以尝试按照以下方式进行操作，即用 div 包裹每个图像，旋转容器，然后反向旋转图像。我的示例并不完美，但您可以尝试一下以获得您想要的效果。

const images = document.querySelectorAll(".slider-img")

function clearActiveImage() {
  images.forEach(function(image) {
    image.classList.remove("active-slider");
  });
}

images.forEach(function(image, index) {
  image.onclick = function() {
    event.stopPropagation()
    if (images[index].classList.contains("active-slider")) {
      images[index].classList.remove("active-slider")
    } else {
      clearActiveImage(index)
      images[index].classList.add("active-slider")
    }
  }
})

window.addEventListener("click", () => {
  clearActiveImage()
})

    .slider-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 150px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-main {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1.5 / 1;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.slider-main:has(.img.active) .img:not(.active) {
  filter: grayscale(100%)
}

.slider-img-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 120%;
  width: calc(100% / 5);
  object-fit: cover;
  overflow: hidden;
  border: none;
  transition: all 0.4s cubic-bezier(0.32, 0, 0.67, 0);
  cursor: pointer;
  transform: rotate(12deg);
}

.active-slider {
  width: 200%;
}

.slider-img {
  transform: rotate(-12deg);
  transform-origin: bottom;
}

   

 <div class="slider-container">
     <div class="slider-main">
         <div class="slider-img-container">
            <img class="slider-img" src="https://image.shutterstock.com/image-photo/mountains-fog-beautiful-night-autumn-260nw-1233564241.jpg" alt="">
         </div>
        <div class="slider-img-container">
          <img class="slider-img" src="https://image.shutterstock.com/image-photo/sunset-ruby-beach-260nw-35902396.jpg" alt="">
        </div>
        <div class="slider-img-container">
          <img class="slider-img" src="https://image.shutterstock.com/image-photo/streelights-uttakleiv-village-shine-below-260nw-2333054447.jpg" alt="">
        </div>  
        <div class="slider-img-container">
           <img class="slider-img" src="https://image.shutterstock.com/image-photo/twilight-light-over-isolated-sandwood-260nw-2333055437.jpg" alt="">       
        </div>
        <div class="slider-img-container">
          <img class="slider-img" src="https://image.shutterstock.com/image-photo/silhouette-young-traveler-watched-star-260nw-1730791102.jpg" alt="">
         </div>
      </div>
    </div>