Swiper使用

uhhuh-495

于 2019-07-20 14:37:57 发布

阅读量118

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42166007/article/details/96590455

版权

功能（方法）实现案例专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用Swiper插件实现网页轮播图效果。包括HTML结构搭建、CSS样式设置及JavaScript初始化配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Swiper实践</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">

	<!-- 引入swiper样式 -->
	<link rel="stylesheet" type="text/css" href="swiper/swiper.css">
	<!-- 需先引入Jquery -->
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<!-- 引入swiper插件 -->
	<script type="text/javascript" src="swiper/swiper.js"></script>
	
</head>
<body>
	<div class="lunbo">
		<div class="swiper-container">
		  	<div class="swiper-wrapper">
		    	<div class="swiper-slide">slider1</div>
		    	<div class="swiper-slide">slider2</div>
		    	<div class="swiper-slide">slider3</div>
		  	</div>
		</div>	
	</div>
</body>
<script type="text/javascript" src="js/index.js"></script>
</html>

css:

.lunbo{
	width: 200px;
	height: 160px;
	background: blue;
	text-align: center;
    margin: 0 auto;
}
.swiper-container{
    height: 100%;
}

js:

var mySwiper = new Swiper('.swiper-container', {
	autoplay: 5000,//可选选项，自动滑动
})