swiper中swiper-slide自适应高度

2025-04-01  本文已影响0人  Hasan_hs
<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

上一篇 下一篇

猜你喜欢

热点阅读