swiper插件怎么设置响应式高度自适应?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper插件怎么设置响应式高度自适应?相关的知识,希望对你有一定的参考价值。

html样式和调用插件的函数都在图上,图片我是用background设置url,但是弄完发现width好像可以自适应屏幕宽度,height却没高度,这个是怎么弄的?新手刚用这个插件,有些搞不懂。。谁能帮我看看哪里错了

参考技术A onSlideChangeStart: function()
var H = $(".content-slide").eq(tabsSwiper.activeIndex).height();
$(".swiper-slide").css('height', H + 'px');
$(".swiper-wrapper").css('height', H + 'px');

这段放里面试试追问

不行

本回答被提问者采纳
参考技术B 修改Swiper.css中的css即可,即:
.swiper-container
/* Specify Swiper's Size: */
width: 100%;
height: 5rem;

.swiper-slide
/* Specify Slides's Size: */
width: 100%;
height: 100%;
参考技术C .swiper-container
width: 100vw;
height: 100vh;

.swiper-slide
width: 100vw;
height: 100vh;

以上是关于swiper插件怎么设置响应式高度自适应?的主要内容,如果未能解决你的问题,请参考以下文章

初试swiper插件-让页面自适应高度

响应式设计与自适应设计有何区别?

高度随宽度适应的响应式方案

「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

vue给的1360的图怎么写页面做到自适应

微信小程序swiper选项卡每个内容都小于一屏,怎么让内容高度自适应?