美文网首页
swiper中swiper-slide自适应高度

swiper中swiper-slide自适应高度

作者: Hasan_hs | 来源:发表于2025-04-01 10:54 被阅读0次
<swiper
          :modules="modules"
            slides-per-view="auto"
            nested="true"
            :freeMode="true"
            :mousewheel="{ releaseOnEdges: true }"
            :scrollbar="{ draggable: true, hide: true }"
            class="swiper-container2"
            direction="vertical"
            @swiper="setControlledSwiper"
            @slideChange="onSlideChange"
        >
            <swiper-slide>内容</swiper-slide>
            <swiper-slide>内容</swiper-slide>
    </swiper>


import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import { Mousewheel, Pagination } from "swiper/modules";
const modules = [Mousewheel, Pagination];


.swiper{
  width: 100%;
  height: 100vh;
}
.swiper-container2 .swiper-slide {
  height: auto;
}

关于swiper同向滑动(内容过长可滚动)轮播图的实现 - demo的文章 - 知乎
https://zhuanlan.zhihu.com/p/624398967

相关文章

网友评论

      本文标题:swiper中swiper-slide自适应高度

      本文链接:https://www.haomeiwen.com/subject/zrdvvjtx.html