Swiper.js slider高度不能适应怎么解决

Posted 2023-03-15

swiper.js 没有限制slider的高度，因为考虑到图片的不规则性，限制了高度，对于一些过大或者过小的图片会造成失真，你可以通过自己设置slider的高度，通过overflow:hidden来避免失真。 参考技术A

操作如下：

1，首先引入核心文件js，以及自带的默认css样式表

<link rel="stylesheet" href="../dist/idangerous.swiper.css" rel="external nofollow" ><script defer src="../dist/idangerous.swiper.min.js"></script>

2，html结构以及插件初始化配置，输入以下代码：

<div class="device">
<a class="arrow-left" href="#" rel="external nofollow"  rel="external nofollow" ></a>
<a class="arrow-right" href="#" rel="external nofollow"  rel="external nofollow" ></a>

参考技术B $(window).resize(function()
var h=$(".swiper-slide").find("img").height();
$(".swiper-wrapper,.swiper-slide").css("height",h)
) 参考技术C 修改Swiper.css中的css即可，即：
.swiper-container
/* Specify Swiper's Size: */
width: 100%;
height: 5rem;

.swiper-slide
/* Specify Slides's Size: */
width: 100%;
height: 100%;
参考技术D onSlideChangeStart: function() var H = $(".content-slide").e(tabsSwiper.activeIndex).height();$(".swiper-slide").css('height', H + 'px');$(".swiper-wrapper").css('height', H + 'px');这段放里面试试