Как доработать блок?

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

Как доработать блок? Cлайдер работает. Свапом ( в этом и суть). Но раскладка не такая как на скрине. В этом и проблема

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.swiper-slide img {
  display: block;
  max-width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

<!-- Swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://i.ibb.co/QFmbQ8t/Rectangle-1850.png" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://i.ibb.co/wBLL2NL/Rectangle-1853.png" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://i.ibb.co/BfG5cGQ/Rectangle-1851.png" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://i.ibb.co/XCmdMC3/Rectangle-1855.png" alt="">
    </div>

    <div class="swiper-slide">
      <img src="https://i.ibb.co/QFmbQ8t/Rectangle-1850.png" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://i.ibb.co/wBLL2NL/Rectangle-1853.png" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://i.ibb.co/BfG5cGQ/Rectangle-1851.png" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://i.ibb.co/XCmdMC3/Rectangle-1855.png" alt="">
    </div>
  </div>
  <div class="swiper-scrollbar"></div>
</div>

<!-- Swiper JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    centeredSlides: false,
    slidesPerGroupSkip: 1,
    grabCursor: true,
    keyboard: {
      enabled: true,
    },
    scrollbar: {
      el: ".swiper-scrollbar",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>

введите сюда описание изображения

Ответы

Ответов пока нет.