显示Flex图像滑块

Question

I have a problem with my image slider. 我的图像滑块有问题。 I've looking the whole day to find a solution and I can't fix this problem. 我整天都在寻找解决方案，但无法解决此问题。 I have an image slider which is set to display: flex . 我有一个设置为display: flex的图像滑块display: flex 。 The problem is when I resize the browser, the current image is not filling the parent container. 问题是当我调整浏览器大小时，当前图像未填充父容器。 It moves left and right. 它左右移动。 You can check out the JSFiddle that I made, so you can see the problem. 您可以签出我制作的JSFiddle ，这样您就可以看到问题所在。 I tried flex-shrink: 0; 我尝试了flex-shrink: 0; , object-fit: fill , cover, etc. and I can't fix it. ， object-fit: fill ，封面等，但我无法修复。 I don't know what am I doing wrong. 我不知道我在做什么错。

HTML: 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: 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: 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)';
})

Thanks for your help in advance :) And sorry for the bad English. 预先感谢您的帮助:)不好意思的英语。

Answer 1

The problem is in the width of the container in css change #meh{} : 问题出在css change #meh {}中容器的宽度：

width: 90%;

to a fixed value like 300px for example : 固定为300px这样的固定值，例如：

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

Answer 2

the problem is in the js code. 问题出在js代码中。 I added this to your code 我将此添加到您的代码中

window.onresize = function(){
   size = images[1].clientWidth;
   container.style.transition = "none";
   container.style.transform = 'translateX(' + (-size * counter) + 'px)';
}

you need to change the size value and the translation of the container 您需要更改size值和container的translation

this is the Jsfiddle 这是Jsfiddle

 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); }

 <!DOCTYPE html> <html> <head> <title>Image Slider</title> <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" id="lastClone"> <img src="https://thepunctuationshow.com/rw_common/themes/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>

显示Flex图像滑块

问题描述

2 个解决方案

解决方案1
0 2018-10-12 18:17:45

解决方案2
0 已采纳 2018-10-12 18:21:55

显示Flex图像滑块

问题描述

2 个解决方案

解决方案1 0 2018-10-12 18:17:45

解决方案2 0 已采纳 2018-10-12 18:21:55

解决方案1
0 2018-10-12 18:17:45

解决方案2
0 已采纳 2018-10-12 18:21:55