我的图像滑块有问题。我整天都在寻找解决方案,但无法解决此问题。我有一个设置为display: flex
的图像滑块。问题是当我调整浏览器大小时,当前图像未填充父容器。它左右移动。您可以检查出我所做的JSFiddle,以便看到问题所在。我尝试过flex-shrink: 0;
,object-fit: fill
,封面等等,但无法修复。我不知道我在做什么错。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="meh">
<div id="main-container">
<div id="slider-container">
<img src="https://copmec.com/images/headers/header40.jpg"
class="img">
<img src="https://thepunctuationshow.com/rw_common/them
es/volcano/images/editable_images/1.jpg"
class="img">
<img src="https://skopelosweb.gr/images/biking.jpg"
class="img">
<img src="https://alphacomputer.rw/images/bannerbg3.jpg"
class="img">
</div>
<button id="prevBtn">prev</button>
<button id="nextBtn">next</button>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
background: green;
min-height: 100%;
}
#meh {
position: relative;
width: 90%;
overflow: hidden;
margin: auto;
}
#main-container {
position: relative;
width: 100%;
height: 100%;
margin: 100px auto 0 auto;
background: red;
}
#slider-container {
position: relative;
display: flex;
width: 100%;
height: 100%;
}
#slider-container img {
width: 100%;
height: 100%;
flex-shrink: 0;
}
#prevBtn {
position: absolute;
left: 0;
top: calc(50% - 35px);
padding: 25px 10px;
outline: none;
border: none;
}
#nextBtn {
position: absolute;
right: 0;
top: calc(50% - 35px);
padding: 25px 10px;
outline: none;
border: none;
}
#slider-container button:hover {
cursor: pointer;
background: rgb(170, 170, 170);
}
JavaScript:
const container = document.getElementById("slider-container");
const images = document.getElementsByClassName("img");
// Buttons
const prev = document.getElementById("prevBtn");
const next = document.getElementById("nextBtn");
// Counter
let counter = 1;
var size = images[1].clientWidth;
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
// Button listeners
next.addEventListener('click', () => {
container.style.transition = "transform 0.5s ease-in-out";
counter++;
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
})
prev.addEventListener('click', () => {
container.style.transition = "transform 0.5s ease-in-out";
counter--;
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
})
首先感谢您的帮助:)不好意思的英语。
答案 0 :(得分:0)
问题出在css change #meh {}中容器的宽度:
width: 90%;
设置为固定值,例如300px:
#meh {
position: relative;
width: 300px;
overflow: hidden;
margin: auto;
}
答案 1 :(得分:0)
问题出在js代码中。我已将此添加到您的代码中
window.onresize = function(){
size = images[1].clientWidth;
container.style.transition = "none";
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
您需要更改size
的{{1}}值和translation
这是Jsfiddle
container
const container = document.getElementById("slider-container");
const images = document.getElementsByClassName("img");
// Buttons
const prev = document.getElementById("prevBtn");
const next = document.getElementById("nextBtn");
// Counter
let counter = 1;
var size = images[1].clientWidth;
window.onresize = function(){
size = images[1].clientWidth;
container.style.transition = "none";
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
// Button listeners
next.addEventListener('click', () => {
container.style.transition = "transform 0.5s ease-in-out";
counter++;
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
})
prev.addEventListener('click', () => {
container.style.transition = "transform 0.5s ease-in-out";
counter--;
container.style.transform = 'translateX(' + (-size * counter) + 'px)';
})
* {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
background: forestgreen;
min-height: 100%;
}
#meh {
position: relative;
width: 90%;
overflow: hidden;
margin: auto;
}
#main-container {
position: relative;
width: 100%;
height: 100%;
margin: 100px auto 0 auto;
background: red;
}
#slider-container {
position: relative;
display: flex;
width: 100%;
height: 100%;
}
#slider-container img {
width: 100%;
height: 100%;
flex-shrink: 0;
}
#prevBtn {
position: absolute;
left: 0;
top: calc(50% - 35px);
padding: 25px 10px;
outline: none;
border: none;
}
#nextBtn {
position: absolute;
right: 0;
top: calc(50% - 35px);
padding: 25px 10px;
outline: none;
border: none;
}
#slider-container button:hover {
cursor: pointer;
background: rgb(170, 170, 170);
}