Question

我的图像滑块有问题。我整天都在寻找解决方案，但无法解决此问题。我有一个设置为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)';
})

首先感谢您的帮助：）不好意思的英语。

Answer 1

问题出在css change #meh {}中容器的宽度：

width: 90%;

设置为固定值，例如300px：

#meh {
  position: relative;
  width: 300px;
  overflow: hidden;
  margin: auto;
}

Answer 2

问题出在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);
}

显示Flex图像滑块

2 个答案: