Адаптив слайдера, уходящего в правую границу экрана

181

03 февраля 2022, 16:50

Помогите сделать адаптив слайдера как на схеме:

чтобы при уменьшении ширины экрана полупрозрачные зеленые блоки 4 и 5 обрезались справа границей окна, а меню и блоки 1,2 и 3 не меняли своих размеров и оставались стоять ровно относительно центра страницы, красных пунктирных полосок и баннера, который тоже не изменяется по ширине.

Блоков в слайдере будет больше 5

Answer 1

body { 
  margin: 0; 
  height: 100vh; 
  display: grid; 
  grid-gap: 1rem; 
  grid-template-columns: 20% 1fr; 
  grid-template-rows: 40% 1fr; 
  grid-template-areas: "banner banner" "menu slider"; 
} 
 
.banner { 
  grid-area: banner; 
  background-color: #D7D7D9; 
} 
 
.menu { 
  grid-area: menu; 
  background-color: #9FA1A6; 
} 
 
.slider { 
  grid-area: slider; 
  background-color: #F0F0F2; 
   
  overflow: hidden; 
  display: flex; 
} 
 
.slide { 
  min-width: calc(100% / 5 - 1rem); 
  height: 100%; 
  margin-right: 1rem; 
  background-color: #404040; 
   
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 5rem; 
  color: white; 
   
  transition: 0.5s; 
} 
 
@media screen and  (max-width : 768px) { 
  .slide { 
    min-width: calc(100% / 3 - 1rem); 
  } 
}

<div class="banner"></div> 
<div class="menu"></div> 
<div class="slider"> 
  <div class="slide">1</div> 
  <div class="slide">2</div> 
  <div class="slide">3</div> 
  <div class="slide">4</div> 
  <div class="slide">5</div> 
</div>