Swiper全屏自适应图片轮播代码

最新推荐文章于 2024-11-09 12:32:09 发布

原创最新推荐文章于 2024-11-09 12:32:09 发布 · 置顶 · 4.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#焦点图 #全屏轮播图

前端模板专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Swiper库创建一个全屏且能自适应屏幕大小的图片轮播效果，提供下载链接获取相关素材。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiper全屏自适应图片轮播代码</title>

<link type="text/css" rel="stylesheet" href="css/style.css">

</head>
<body>

<section class="pc-banner">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-slide-center none-effect">
				<a href="#">
					<img src="img/b1.png">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/b2.png">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/b3.png">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/b4.png">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/b5.png">
				</a>
				<div class="layer-mask"></div>
			</div>
		</div>
		<div class="button">
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</section>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">

	window.onload = function() {
		var swiper = new Swiper('.swiper-container',{
			autoplay: false,
			speed: 1000,
			autoplayDisableOnInteraction: false,
			loop: true,
			centeredSlides: true,
			slidesPerView: 2,
			pagination: '.swiper-pagination',
			paginationClickable: true,
			prevButton: '.swiper-button-prev',
			nextButton: '.swiper-button-next',
			onInit: function(swiper) {
				swiper.slides[2].className = "swiper-slide swiper-slide-active";
			},
			breakpoints: {
				668: {
					slidesPerView: 1,
				}
			}
		});
	}


</script>

</body>
</html>

有需要附件请在素材无忧站下载：下载地址