首页 技术文章 javascript

swiper容器高度随内容变化

发布日期: 2024-03-07
FontSize: 【小 中 大】
swiper容器高度随内容变化

Swiper是一个流行的触摸滑动库，用于创建响应式、易于使用的触摸滑动器。Swiper在国内被运用的非常多，它可以用于banner多图左右循环展示，也可以上下滑动切换页面。

官网地址：https://swiperjs.com，相关的中文网站也非常多，可想而知，它的知名度已经非常高了。

如何让swiper容器高度随内容变化？

现在的网站都流行响应式布局、弹性布局，上传的图片可能比例并不一样，如果您在页面中使用了多张banner图，以及Swiper库，肯定不希望由于图片的比例不一样，在图片左右滑动的时候，容器的高度时长时短，使页面“跳来跳去的”，Swiper中的autoHeight参数可以很好的解决这个问题，将该参数的值设置为true即可，它的默认值为flase。

示例：

var swiper = new Swiper(".mySwiper", {
		loop: true, // 循环模式选项
		autoHeight: true, //高度随内容变化
		pagination: {
			el: ".swiper-pagination",
			dynamicBullets: true,
		},
    });

测试一下使用autoHeight:true让swiper容器高度随内容变化

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<link rel="stylesheet" href="https://z.lichil.com/vendor/swiper11.0.3/swiper-bundle.min.css" />
<style>
.box {width: 400px; overflow: hidden; position: relative;}
.mySwiper {
	width: 400px;
	margin-left: 0px;
	margin-top: 0px !important;
}
.mySwiper img {
	display: block;
	margin-top: 0px !important;
}
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s; /* 添加过渡效果 */
}
.swiper-slide img:hover {
	transform: scale(1.2); /* 悬浮时放大到 1.2 倍大小 */
}
.swiper-pagination-bullet {
	background:var(--swiper-pagination-bullet-inactive-color,#FFF);
}
.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main {
	--swiperi-color: #FFFFFF;
	background:var(--swiper-pagination-color,var(--swiperi-color));
}
</style>
</head>
<body>
<div class="box">
	<div class="mySwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="https://z.lichil.com/upload/images/test/210924114I0GA-0-lp.webp"></div>
			<div class="swiper-slide"><img src="https://z.lichil.com/upload/images/test/248e7b92c24943d29ded56e8dc6c98e8.webp"></div>
			<div class="swiper-slide"><img src="https://z.lichil.com/upload/images/test/355e251b1a9742119b103f990228ff00noop.webp"></div>
			<div class="swiper-slide"><img src="https://z.lichil.com/upload/images/test/1642750555106164275055551.webp"></div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</div>
<div>高度随内容变化，影响下方的内容显示</div>
<script type="text/javascript" src="https://z.lichil.com/vendor/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://z.lichil.com/vendor/swiper11.0.3/swiper-bundle.min.js"></script>
<script type="module">
$(document).ready(function() {
	$(".swiper-pagination-bullet-active").css("backgroud","#FFF");
	var swiper = new Swiper(".mySwiper", {
		loop: true, // 循环模式选项
		autoHeight: true, //高度随内容变化
		pagination: {
			el: ".swiper-pagination",
			dynamicBullets: true,
		},
    });
});
</script>
</body>
</html>

您可以更改autoHeight为false来测试一下不同的效果。

 

swiper