Swiper高度随内容变化

发布时间：2023-05-18

一、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，忘记手动设置高度的时间，完全不受限制。

推荐文章