html - 将图像放在滑块内的两行中

Question

我正在尝试创建一个手动滑块，其中图像应该在两行 - 水平滑动。我试图用 flexbox 来做，但是我做错了...欢迎所有建议

.slider {
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    overflow-x: scroll;
    height: 230px;
    width: 400px;
    height: 200px;
}

img {
  width: 120px;
  height: 100px;
  object-fit: cover;
}

<div class="slider">
  <img src="http://placekitten.com/500/300" alt="">
  <img src="http://placekitten.com/200/300" alt="">
  <img src="http://placekitten.com/700/300" alt="">
  <img src="http://placekitten.com/100/300" alt="">
  <img src="http://placekitten.com/700/300" alt="">
  <img src="http://placekitten.com/500/300" alt="">
  <img src="http://placekitten.com/500/300" alt="">
  <img src="http://placekitten.com/500/300" alt="">
  <img src="http://placekitten.com/500/300" alt="">
</div>

标签： htmlcss

Answer 1

尝试这个：

.slider {
    display: flex;
    flex-wrap: wrap;
    overflow-x: scroll;
    width: 400px;
    height: 200px;
}

img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}