swiper轮播图引用

最新推荐文章于 2024-08-21 17:47:57 发布

虬川候

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量788

点赞数

分类专栏：前端插件文章标签： swiper 轮播图插件 js轮播

本文链接：https://blog.csdn.net/qq_39383675/article/details/83782099

版权

前端插件专栏收录该内容

0 篇文章 0 订阅

订阅专栏

更多设置官网入口：https://www.swiper.com.cn/api/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width:device-width; user-scalable=0; initial-scale=1.0;">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.blue-slide{
    		background-color: blue;
    	}
    	.red-slide{
    		background-color: red;
    	}
    	.orange-slide{
    		background-color: orange;
    	}
    	.swiper-slide{
    		line-height: 300px;
    		color: white;
    		font-size: 40px;
    		text-align: center;
    	}
    	.swiper-pagination-bullet-active{
    		background-color: white;
    	}
    </style>
  </head>
  <body>
  	<div class="swiper-container">
  		<div class="swiper-wrapper">
  			<!--一张图一个swiper-slide  DIV-->
  			<div class="swiper-slide blue-slide">slide1</div>
  			<div class="swiper-slide red-slide">slide2</div>
  			<div class="swiper-slide orange-slide">slide3</div>
  		</div>
  		
  		<div class="swiper-pagination"></div>	
  	</div>
  </body>
</html>
<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container',{
//		循环
		loop:true,
//		播放速度
		autoplay:2000,
//		设置小点
		pagination:'.swiper-pagination',
//		切换效果
		effect:''
		
	});
</script>