Swiper隐藏点击再显示高度问题
文章描述：
swiper幻灯片开始时不展示隐藏状态，点击显示后发现高度有问题，效果也有问题。
<!-- Swiper -->
<div class="swiper-container" id="mySwiperContainer" style="display: none;">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="uploads/2026/1.jpg" style="max-width: 1100px;" /></div>
<div class="swiper-slide"><img src="uploads/2026/2.jpg" style="max-width: 1100px;" /></div>
<div class="swiper-slide"><img src="uploads/2026/3.jpg" style="max-width: 1100px;" /></div>
<div class="swiper-slide"><img src="uploads/2026/4.jpg" style="max-width: 1100px;" /></div>
<div class="swiper-slide"><img src="uploads/2026/5.jpg" style="max-width: 1100px;" /></div>
<div class="swiper-slide"><img src="uploads/2026/1.jpg" style="max-width: 1100px;" /></div>
</div>
<!-- Add Pagination -->
<!--<div class="swiper-pagination"></div>-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
var mySwiper = new Swiper('.swiper-container', {
// Swiper 配置项
});
function showSwiper() {
document.getElementById('mySwiperContainer').style.display = 'block'; // 或者使用 visibility: visible;
mySwiper.update(); // 更新 Swiper 实例
}
发布时间：2026/03/23
发表评论