I'm creating a slider using Swiper JS which reveals the next slider partially as following
However it's work great until end of original slides and when the loop mode enabled duplicate slides start next slide is disapear and appear on next one
Following is what I tried so far in JS Fiddle:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<img src="https://picsum.photos/200" alt="">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum id, velit, voluptatem quis quisquam quas rem, ea, quia iusto tempore animi alias. Natus, voluptas accusantium.
</p>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://picsum.photos/200" alt="">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit tempora perspiciatis ratione excepturi labore, expedita eos quis sequi consequuntur, doloremque odio soluta fugit, ut sed?</p>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://picsum.photos/200" alt="">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum id, velit, voluptatem quis quisquam quas rem, ea, quia iusto tempore animi alias. Natus, voluptas accusantium.
</p>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://picsum.photos/200" alt="">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit tempora perspiciatis ratione excepturi labore, expedita eos quis sequi consequuntur, doloremque odio soluta fugit, ut sed?</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</body>
</html>
.swiper-slide{
display:flex !important;
}
.swiper-slide div{
width:calc(50% - 25px);
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide div:nth-child(2){
padding-left: 25px;
}
.swiper-slide div:nth-child(2) p {
max-width:200px;
}
img{
width:100%;
}
.mySwiper{
padding-right: 100px !important;
}
var swiper = new Swiper(".mySwiper", {
loop:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});