Based on your needs, I think you can achieve this design by setting the distance of the scroll bar from the top of the page.
Use: let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
The js code you gave me for scroll cards sideways will make the card disappear directly, but I can show you how my design works. My design is when that section of the page is seen, the cards will show yellow.
To better showcase the features, I increased the distance between the card and the top of the page:
.swiper-container {width: 100%; padding-top: 50px; padding-bottom: 50px; margin: 0 auto;}
Changed to
.swiper-container {width: 100%; padding-top: 3050px; padding-bottom: 50px; margin: 0 auto;}
Code:
<style>
section{position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2196f3; overflow: hidden;}
.swiper-container {width: 100%; padding-top: 3050px; padding-bottom: 50px; margin: 0 auto;}
.swiper-slide {margin: 0 auto; background-position: center; background-size: cover; width: 320px; background: #fff; box-shadow: 0 15px 50px rgba(0,0,0,0.2)}
.testimonialBox{
position: relative;
width:100%;
padding: 40px;
padding-top: 90px;
color: #999;
}
.details{
font-size: 2rem;
}
</style>
<div class="subbottom">
<section>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="card1">
<div class="testimonialBox">
<div class="showcontent">
<label class="details">1</label>
</div>
</div>
</div>
<div class="swiper-slide" id="card2">
<div class="testimonialBox">
<div class="showcontent">
<label class="details">2</label>
</div>
</div>
</div>
<div class="swiper-slide" id="card3">
<div class="testimonialBox">
<div class="showcontent">
<label class="details">3</label>
</div>
</div>
</div>
<div class="swiper-slide" id="card4">
<div class="testimonialBox">
<div class="showcontent">
<label class="details">4</label>
</div>
</div>
</div>
<div class="swiper-slide" id="card5">
<div class="testimonialBox">
<div class="showcontent">
<label class="details">5</label>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<input type="button" onload="fun()" />
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var intervalId = setInterval(function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
if (scrollTop > 2500) {
document.getElementById("card1").style.backgroundColor = "yellow";
document.getElementById("card2").style.backgroundColor = "yellow";
document.getElementById("card3").style.backgroundColor = "yellow";
document.getElementById("card4").style.backgroundColor = "yellow";
document.getElementById("card5").style.backgroundColor = "yellow";
}
if (scrollTop < 2500) {
document.getElementById("card1").style.backgroundColor = "white";
document.getElementById("card2").style.backgroundColor = "white";
document.getElementById("card3").style.backgroundColor = "white";
document.getElementById("card4").style.backgroundColor = "white";
document.getElementById("card5").style.backgroundColor = "white";
}
}, 100);
</script>
Output:
Best Regards
Qi You
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.