<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Title</title>
<link href="js/swiper4-animate-demo/css/swiper.min.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
.clearFix:after,
.clearFix:before{
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
display: block;
content: "";
}
.container{
max-width: 640px;
min-width: 320px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.container>ul:first-child{
/*width: 1000%;*/
}
.container>ul:first-child>li{
/*width: 10%;
float: left;*/
}
.container>ul:first-child>li>a{
display: block;
width: 100%;
}
.container>ul:first-child>li>a>img{
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="container swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a><img src="images/l1.jpg"></a></li>
<li class="swiper-slide"><a><img src="images/l2.jpg"></a></li>
<li class="swiper-slide"><a><img src="images/l3.jpg"></a></li>
<li class="swiper-slide"><a><img src="images/l4.jpg"></a></li>
<li class="swiper-slide"><a><img src="images/l5.jpg"></a></li>
<li class="swiper-slide"><a><img src="images/l6.jpg"></a></li>
<li class="swiper-slide"><a><img src="images/l7.jpg"></a></li>
<li class="swiper-slide"><a><img src="images/l8.jpg"></a></li>
</ul>
<ul class="swiper-pagination"></ul>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/swiper4-animate-demo/js/swiper.min.js"></script>
<script>
$(function () {
/*
* 1.自动轮播
* 2.无缝循环
* 3.指示功能
* */
new Swiper (‘.swiper-container‘, {
autoplay:{
disableOnInteraction: false,
},
loop:true,
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination‘,
},
})
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/cycczh/p/11332349.html