我创建了这个全屏滑块，其中幻灯片的每个图像都具有完整的宽度和高度，该宽度和高度占据了整个屏幕，但是在调整浏览器大小时无法使图像获得完整的宽度和高度。
这是HTML代码：
<div class="carousel">
<button id="prevBtn"><i class="fas fa-angle-left"></i> Previous</button>
<button id="nextBtn"><i class="fas fa-angle-right"></i> Next</button>
<div class="slides-container">
<div class="slide">
<img src="https://images.unsplash...." alt="" />
</div>
<div class="slide">
<img src="https://images...." alt="" />
</div>
<div class="slide">
<img src="https://images...." alt="" />
</div>
</div>
</div>
上面的每个图像都具有以下css样式：
.slides-container {
position: relative;
display: flex;
width: 100vw;
height: 100vh;
}
.slide img {
width: 100vw;
height: 100vh;
object-fit: cover;
}
我尝试了这种方法，效果很好，但我不想在调整窗口大小时刷新浏览器：
window.onresize = function () {
location.reload();
};
在JavaScript文件中可能会注意到该问题，该文件的const slideWidth = slides[0].clientWidth;大小在窗口调整时不会更新。这是JS代码：
const slideWidth = slides[0].clientWidth;
nextBtn.addEventListener("click", () => {
nextSlide();
});
function nextSlide() {
slidesContainer.style.transition = "all 0.3s ease-in-out";
index++;
slidesContainer.style.transform = `translateX(${
-slideWidth * (index + 1)
}px)`;
if (index > slides.length - 1) {
setTimeout(() => {
index = 0;
slidesContainer.style.transform = `translateX(${-slideWidth}px)`;
slidesContainer.style.transition = "none";
}, 300);
}
}
完整的代码在这里可用。谢谢
尝试使用100vw而不是设置slideWidth为像素。
在开始时，slideWidth = 100然后在每次设置transformX时，都使用vw而不是像素
例
slidesContainer.style.transform = `translateX(${
-slideWidth * (index + 1)
}px)`;
至
slidesContainer.style.transform = `translateX(${
-slideWidth * (index + 1)
}vw)`;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句