Как доработать блок?
Как доработать блок? 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>
Источник: Stack Overflow на русском