我制作了一个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>I already tried using "transform: skewX(-20deg)" but then my whole images get distorted. I am attaching an image of how it should look like.
