如何解决SwiperJS - 在同一页面上运行的 2 张不同的幻灯片幻灯片 2 导致溢出和间距问题
我有 2 个单独的幻灯片在同一页面上同时运行。顶部幻灯片很好,底部幻灯片导致溢出,并且在调整屏幕大小时 2 个滑块之间存在间隙问题。我做错了什么?
顶部滑块 = .swiper-container |底部滑块 = .luxury-slider-container
HTML
<!-- Top Slider Container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<!---SLIDE 1 --->
<div class="swiper-slide">
<div class="card card1">
<div class="border">
<h1 class="homeinfo1">SOLD | BARRIE</h1>
<div class="moving-text">
<h2 class="homeinfo2">26 BROOKFIELD CRES</h2>
<h3 class="homeinfo3">BARRIE</h3>
<h4 class="homeinfo4">3 BD | 3 BA | 1,500 - 2000 SQFT</h4>
<h5 class="homeinfo5">$951,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---SLIDE 2 --->
<div class="swiper-slide">
<div class="card card2">
<div class="border">
<h1 class="homeinfo1">SOLD | BARRIE</h1>
<div class="moving-text">
<h2 class="homeinfo2">1926 WEBSTER BLVD</h2>
<h3 class="homeinfo3">INNISFIL</h3>
<h4 class="homeinfo4">4 BD | 4 BA | 2,700 SQFT</h4>
<h5 class="homeinfo5">$888,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---SLIDE 3 --->
<div class="swiper-slide">
<div class="card card3">
<div class="border">
<h1 class="homeinfo1">SOLD | BARRIE</h1>
<div class="moving-text">
<h2 class="homeinfo2">12 GABLES WAY</h2>
<h3 class="homeinfo3">BARRIE</h3>
<h4 class="homeinfo4">4 BD | 3 BA | 1,600 SQFT</h4>
<h5 class="homeinfo5">$895,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---SLIDE 4 --->
<div class="swiper-slide">
<div class="card card4">
<div class="border">
<h1 class="homeinfo1">SOLD | BARRIE</h1>
<div class="moving-text">
<h2 class="homeinfo2">137 FERNDALE DR S</h2>
<h3 class="homeinfo3">BARRIE</h3>
<h4 class="homeinfo4">6 BD | 4 BA | 4,293 SQFT</h4>
<h5 class="homeinfo5">$890,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---SLIDE 5 --->
<div class="swiper-slide">
<div class="card card5">
<div class="border">
<h1 class="homeinfo1">SOLD | BARRIE</h1>
<div class="moving-text">
<h2 class="homeinfo2">97 MUIRFIELD DR</h2>
<h3 class="homeinfo3">BARRIE</h3>
<h4 class="homeinfo4">5 BD | 4 BA | 3,247 SQFT</h4>
<h5 class="homeinfo5">$915,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---SLIDE 6 --->
<div class="swiper-slide">
<div class="card card6">
<div class="border">
<h1 class="homeinfo1">SOLD | BARRIE</h1>
<div class="moving-text">
<h2 class="homeinfo2">57 KIERLAND RD</h2>
<h3 class="homeinfo3">BARRIE</h3>
<h4 class="homeinfo4">5 BD | 4 BA | 3,230 SQFT</h4>
<h5 class="homeinfo5">$985,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Slider Container -->
<div class="luxury-swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Luxury Slides -->
<!---LUXURY SLIDE 1 --->
<div class="swiper-slide">
<div class="card luxurycard1">
<div class="border">
<h1 class="homeinfo1">SOLD | Midhurst</h1>
<div class="moving-text">
<h2 class="homeinfo2">54 Heatherwood Dr</h2>
<h3 class="homeinfo3">Midhurst</h3>
<h4 class="homeinfo4">7 BD | 4 BA | 5,031 SQFT</h4>
<h5 class="homeinfo5">$1,050,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---LUXURY SLIDE 2 --->
<div class="swiper-slide">
<div class="card luxurycard2">
<div class="border">
<h1 class="homeinfo1">SOLD | Springwater</h1>
<div class="moving-text">
<h2 class="homeinfo2">10 Collins Lane</h2>
<h3 class="homeinfo3">Springwater</h3>
<h4 class="homeinfo4">5 BD | 3 BA | 1,501 - 2,000 SQFT</h4>
<h5 class="homeinfo5">$1,175,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---LUXURY SLIDE 3 --->
<div class="swiper-slide">
<div class="card luxurycard3">
<div class="border">
<h1 class="homeinfo1">SOLD | Springwater</h1>
<div class="moving-text">
<h2 class="homeinfo2">11 Trail BLVD</h2>
<h3 class="homeinfo3">Springwater</h3>
<h4 class="homeinfo4">4 BD | 4 BA | 4,231 SQFT</h4>
<h5 class="homeinfo5">$1,200,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---LUXURY SLIDE 4 --->
<div class="swiper-slide">
<div class="card luxurycard4">
<div class="border">
<h1 class="homeinfo1">SOLD | Springwater</h1>
<div class="moving-text">
<h2 class="homeinfo2">18 Wendat Trail</h2>
<h3 class="homeinfo3">Springwater</h3>
<h4 class="homeinfo4">4 BD | 4 BA | 2,000 - 3,500,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---LUXURY SLIDE 5 --->
<div class="swiper-slide">
<div class="card luxurycard5">
<div class="border">
<h1 class="homeinfo1">SOLD | Springwater</h1>
<div class="moving-text">
<h2 class="homeinfo2">15 O'Hara Lane</h2>
<h3 class="homeinfo3">Springwater</h3>
<h4 class="homeinfo4">5 BD | 5 BA | 4,372 SQFT</h4>
<h5 class="homeinfo5">$1,590,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<!---LUXURY SLIDE 6 --->
<div class="swiper-slide">
<div class="card luxurycard6">
<div class="border">
<h1 class="homeinfo1">SOLD | BARRIE</h1>
<div class="moving-text">
<h2 class="homeinfo2">43 Shanty Bay RD</h2>
<h3 class="homeinfo3">BARRIE</h3>
<h4 class="homeinfo4">5 BD | 4 BA | 3,627 SQFT</h4>
<h5 class="homeinfo5">$2,780,000</h5>
</div>
<div class="button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
SwiperJS
<!---TOP SLIDER CODE --->
<script>
var mySwiper = new Swiper(".swiper-container",{
// Optional parameters
slidesPerView: 3,loop: true,direction: "horizontal",//AutoPlay Settings
autoplay: 1700,// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"
}
});
//Stop and Start Autoplay Settings
$(".swiper-container").on("mouseenter",function(e) {
console.log("stop autoplay");
mySwiper.stopAutoplay();
});
$(".swiper-container").on("mouseleave",function(e) {
console.log("start autoplay");
mySwiper.startAutoplay();
});
</script>
<!---BOTTOM SLIDER CODE --->
<script>
var mySwiper2 = new Swiper(".luxury-swiper-container",prevEl: ".swiper-button-prev"
}
});
//Stop and Start Autoplay Settings
$(".luxury-swiper-container").on("mouseenter",function(e) {
console.log("stop autoplay");
mySwiper.stopAutoplay();
});
$(".luxury-swiper-container").on("mouseleave",function(e) {
console.log("start autoplay");
mySwiper.startAutoplay();
});
</script>
真的希望有人能帮助我。在这方面工作太久了。快要完成了!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。