Как на половину скрыть блоки слайдера,как на макете?

Question

Как на половину скрыть блоки слайдера,как на макете?

Рейтинг: 1Ответов: 0Опубликовано: 27.08.2023

Как можно скрыть на половину блоки,как на макете :

Ссылка : https://xd.adobe.com/view/3831e990-1d2a-4aa1-9b83-f0ad445abd5d-6d62/screen/412772a8-93d7-425c-a81d-e3e3329ce836/

Нужно,чтобы первые 4 блока были видны полностью,а последние 2 на половину,потом,когда вниз пролистнул,то первые 2 блока должны были видны на половину.

Код :

    <!DOCTYPE html>
<html>
  <head>
    <title>Вертикальный слайдер</title>
    <style>
      @import url("https://unpkg.com/swiper/swiper-bundle.min.css");

      .swiper-container {
        width: 350px;
        height: 120px;
      }

      .swiper-slide {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50%;
        padding: 10px;
        box-sizing: border-box;
      }

      .slider-block {
        width: 140px;
        height: 100px;
        background-color: lightgray;
        margin-bottom: 10px;
        border-radius: 18px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slider-block"></div>
          <div class="slider-block"></div>
        </div>
        <div class="swiper-slide">
          <div class="slider-block"></div>
          <div class="slider-block"></div>
        </div>
        <div class="swiper-slide">
          <div class="slider-block"></div>
          <div class="slider-block"></div>
        </div>
      </div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
      new Swiper(".swiper-container", {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 10,
      });
    </script>
  </body>
</html>

css javascript html swiper.js css3

Источник: Stack Overflow на русском

Как на половину скрыть блоки слайдера,как на макете?

Ответы