项目遇到比较有点要求的轮播图，默认显示3张图片，中间显示全部，两边显示部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="target-densitydpi=320,width=750,user-scalable=no" name="viewport">
<meta content="no" name="apple-touch-fullscreen">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--<meta name="viewport" content="width=750, initial-scale=1, user-scalable=no">-->
<title>demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<!--<link rel="stylesheet" href="swiper.min.css">-->
<style>
.swiper{
box-sizing: border-box;
position: relative;
padding: 20px 0 53px;
background-color: #f9f9f9;
}
.swiper-container {
margin-top: 20px;
width: 750px;
height: 320px;
margin-bottom: 53px;
overflow: visible!important;
}
.swiper-container .swiper-wrapper .swiper-slide{ width: 620px; border-radius: 20px;}
.swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 320px; border-radius: 20px;}
.swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-active{ width: 620px;}
.swiper-pagination{
bottom: -30px!important;
}
.swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
.swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}
</style>
<script src="swiper.min.js"></script>
<!--<script src="../js/swiper.min.js"></script>-->
</head>
<body>
<div>
<div>
<div>
<div><img src="../images/banner_default.jpg"/></div>
<div><img src="../images/3.jpg"/></div>
<div><img src="../images/po.jpg"/></div>
</div>
<!-- 如果需要分页器 -->
<div></div>
</div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
autoplay: 5000,
slidesPerView: "auto",
centeredSlides:true,
spaceBetween: 20,
// 如果需要分页器
pagination: '.swiper-pagination',
})
</script>
</body>
</html>
