Css 弹性滑块

Question

我有一个容器，其中包含一些基于 flex 定位的内容，因此它是自适应的。我有 display:flex 的横梁块。我只想让我的滑块连续 2 个项目。其他项目应隐藏。我不知道容器的宽度。

这是我的 html:

<div class="slider">
    <div class="item">lorem100</div>
    <div class="item">lorem100</div>
    <div class="item">lorem100</div>
    <div class="item">lorem100</div>
</div>

这是我的 css:

.slider {
    display: flex;
    overflow: hidden;
}

.item {
    height: 150px;
}

我有：

我要：

更新现在如何运作

Answer 1

为您的子项目使用 flex: 1 0 50%;

.slider {
  display: flex;
  width: 300px;      /* just for this demo */
  margin: 0 auto;    /* just for this demo */
  background: gold;  /* just for this demo */
  /* overflow: hidden; /* Uncomment once you understand the demo */
}

.item {
  flex: 1 0 50%;
  outline: 1px solid red;
  height: 150px;
}

<div class="slider">
  <div class="item">lorem100</div>
  <div class="item">lorem100</div>
  <div class="item">lorem100</div>
  <div class="item">lorem100</div>
</div>

没有 CSS 评论的示例：

.slider {
  display: flex;
  overflow: hidden;
}

.item {
  flex: 1 0 50%;
  outline: 1px solid red;
  height: 150px;
}

<div class="slider">
  <div class="item">lorem 1</div>
  <div class="item">lorem 2</div>
  <div class="item">lorem 3</div>
  <div class="item">lorem 4</div>
</div>

简单Prev/Next轮播

为了让你省去一些脑痛，
如果您打算为 .slider 设置动画，则不应将 overflow:hidden 设置为它，而应设置为 父元素 .
这是一个使用纯 JavaScript:

的小例子

const ELS = (sel, par) => (par || document).querySelectorAll(sel);
const EL = (sel, par) => (par || document).querySelector(sel);
const mod = (n, m) => (n % m + m) % m;

ELS(".slider-wrapper").forEach(EL_par => {
  const EL_slider = EL(".slider", EL_par);
  const ELS_items = ELS(".item", EL_par);
  const sub = +EL_par.dataset.items ?? 1;
  const tot = Math.ceil(ELS_items.length / sub);
  let c = 0;
  
  const anim = () => EL_slider.style.transform = `translateX(-${c*100}%)`;
  const prev = () => (c = mod(c-1, tot), anim());
  const next = () => (c = mod(c+1, tot), anim());
  
  EL(".prev", EL_par).addEventListener("click", prev);
  EL(".next", EL_par).addEventListener("click", next);
});

/* QuickReset */

* {
  margin: 0;
  box-sizing: border-box;
}

/* Slider */

.slider-wrapper {
  overflow: hidden;
}

.slider {
  position: relative;
  display: flex;
  transition: 0.5s;
}

.item {
  flex: 1 0 50%;
  min-height: 150px;
}

<div class="slider-wrapper" data-items="2">
  <div class="slider">
    <div class="item" style="background:#0bf;">Item 1</div>
    <div class="item" style="background:#fb0;">Item 2</div>
    <div class="item" style="background:#f0b;">Item 3</div>
    <div class="item" style="background:#b0f;">Item 4</div>
    <div class="item" style="background:#bf0;">Item 5</div>
    <div class="item" style="background:#0fb;">Item 6</div>
    <!-- Never use inline style. This is just for demo. -->
  </div>
  <button class="prev" type="button">&larr;</button>
  <button class="next" type="button">&rarr;</button>
</div>

Answer 2

flex: 1 0 50%;

.slider {
  display: flex;
  overflow-x: scroll;
  border:1px solid black;
}

.item{
  height: 150px;
  flex:1 0 50%;
}


/* background color for the items */
.item_1{
  background:#ff0000;
}
.item_2{
  background:#00ff00;
}
.item_3{
  background:#0000ff;
}
.item_4{
  background:#ffff00;
}

<div class="slider">
    <div class="item item_1">lorem100</div>
    <div class="item item_2">lorem100</div>
    <div class="item item_3">lorem100</div>
    <div class="item item_4">lorem100</div>
</div>

Css 弹性滑块

Css slider with flex

html

css

slider

flexbox

简单Prev/Next轮播