Css slider with flex

Question

I have a container with some content based on flex positioning so it is adaptive. And i have silde block which is display:flex. I want to have only 2 items in a row for my slider. Other items should be hidden. I don't know the width of container.

This is my html:


    lorem100
    lorem100
    lorem100
    lorem100

This is my css:

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

.item {
    height: 150px;
}

I have:

I want:

Update How it works now

user_383904 · Answer

Use flex: 1 0 50%; for your child items

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


  lorem100
  lorem100
  lorem100
  lorem100

Example without the CSS comments:

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

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


  lorem 1
  lorem 2
  lorem 3
  lorem 4

Simple Prev/Next Carousel

To spare you some brain pain,
if you plan to animate your .slider, you should not set the overflow:hidden to it, but to a parent element.
Here's a small example using pure 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;
}


  
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

user_18190615 · Answer

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


    lorem100
    lorem100
    lorem100
    lorem100

Css slider with flex

2 Answers

Simple Prev/Next Carousel