HTML+CSS Помогите сделать такой блок, у которого элементы за границу выезжают

Question

body {
  margin: 0;
  background: #333;
}
.slider {
  width: 90%;
  height: 300px;
  margin: 50px  auto;
  background: #fff;
  overflow: hidden;
}
.slider__wrapper {
  width: 200%;
  overflow: hidden;
  display: flex;
}
.slider-block {
  width: 250px;
  height: 300px;
  background: #cdcdcd;
  margin: 30px;
  transform: translateX(-100px);
}

<body>
  <div class="slider">
    <div class="slider__wrapper">
      <div class="slider-block"></div>
    <div class="slider-block"></div>
    <div class="slider-block"></div>
    <div class="slider-block"></div>
    <div class="slider-block"></div>
    <div class="slider-block"></div>
    </div>
  </div>
</body>

Как эти блоки сделать равномерными по бокам т.е что с левой стороны обрезается на половину, что с правой и вообще это правильный способ у меня? может можно проще сделать? Я планирую подключить слайдер Swiper, он подойдет?

Answer 1

body {
  margin: 0;
  background: #333;
}

.slider {
  width: 90%;
  height: 300px;
  margin: 50px auto;
  background: #fff;
  overflow: hidden;
  position:relative;
  display: flex;
  justify-content: center;
}

.slider__wrapper {
  width: 200%;
    margin: auto;
  overflow: hidden;
  position: absolute;
  max-height: 300px;
  display: flex;
}

.slider-block {
  width: 25%;
  height: 300px;
  background: #cdcdcd;
  margin: 2%;
}

<body>
  <div class="slider">
    <div class="slider__wrapper">
      <div class="slider-block"></div>
      <div class="slider-block"></div>
      <div class="slider-block"></div>
      <div class="slider-block"></div>
      <div class="slider-block"></div>
      <div class="slider-block"></div>
    </div>
  </div>
</body>

Как то так. Разумеется есть масса способов для достижения желаемого результата - это лишь один из них.

БЛОГ НА HUSL

HTML+CSS Помогите сделать такой блок, у которого элементы за границу выезжают

Ответы (1 шт):