Swiper高度隨內容變化

一、Swiper簡介

Swiper是一款強大的移動端輪播插件。它支持多種輪播模式和交互效果，並且可以自定義輪播內容和樣式。Swiper使用靈活方便，是移動端web開發的必備工具之一。

二、Swiper高度變化

1. 根據內容自動適應高度

默認情況下，Swiper的高度是固定的，也就是說滑動內容的高度超過了Swiper容器的高度，內容將會被截斷。為了解決這個問題，可以通過設置Swiper的參數使其根據內容自動適應高度。

var mySwiper = new Swiper('.swiper-container', {
    autoHeight: true,
});

給autoHeight參數設為true，就可實現Swiper高度隨內容變化。

2. 禁用高度自適應

有時候不希望Swiper的高度隨內容變化，可以設置autoHeight參數為false。

var mySwiper = new Swiper('.swiper-container', {
    autoHeight: false,
});

三、實現方式

1. 設置Slide的高度

要實現Swiper高度隨內容變化的效果，一種方式是手動設置Slide的高度。這裡以垂直滑動為例：

.swiper-slide {
    height: auto;
    overflow: hidden;
}

.swiper-slide p {
    margin: 10px;
}

通過設置Slide的高度為auto，在Slide中的內容高度超過Slide的容器時，Slide會根據內容自動擴展高度。同樣，可以使用overflow: hidden隱藏溢出的內容。需要注意的是，如果Slide的高度較少，可能會導致輪播出現空白的情況，可以通過CSS設置最小高度來避免這種情況。

2. 使用swiper-slide自適應高度插件

除了手動設置Slide的高度，還可以使用swiper-slide自適應高度插件。這個插件可以自動計算Slide的高度，從而實現Slide高度隨內容變化的效果。

var mySwiper = new Swiper('.swiper-container', {
    // ...
    on: {
        slideChangeTransitionEnd: function () {
            this.updateAutoHeight(500);//重置高度
        }
    },
    autoHeight: true,
    watchSlidesProgress: true,
    watchSlidesVisibility: true,
});

Swiper初始化時在參數中添加autoHeight: true來自動適應Slide的高度，接下來需要增加swiper-slide自適應高度插件需要的幾個參數。

• watchSlidesProgress：當Swiper初始化和滑塊改變時，觸發slideChangeTransitionEnd事件。
• watchSlidesVisibility：用於隱藏未渲染的Slide，設置為true時Slide會在被滑動到之前被渲染。
• slideChangeTransitionEnd：在滑塊轉換完成後觸發，重置高度

使用這個插件可以自動計算Slide的高度，並且在Slide內容改變後自動適應高度，使用起來非常方便。

四、總結

Swiper高度隨內容變化的效果非常常用，可以使用手動設置Slide高度或使用自適應高度插件來實現。對於使用自適應高度插件的Swiper，忘記手動設置高度的時間，完全不受限制。