swiper 一行显示5张且每次点击按钮一次性移动5张(5张为一组)

1.dom元素

<div id="box">
	<div class="swiper-container">
		<div class="swiper-wrapper">
		
			<div class="swiper-slide">
				<img src="./banner1.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner2.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner3.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner4.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner5.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner5.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner4.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner3.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner2.png" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="./banner1.png" alt="" />
			</div>
		
		</div>
		<!--如果你需要分页-->
		<div class="swiper-pagination"></div>
		<!--如果你需要前进后退按钮-->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
</div>
		

2.css样式

// 引入swiper.min.css
<link rel="stylesheet" href="./swiper/dist/css/swiper.min.css" />

#box {
	width: 1324px;
	margin: 20px auto;
}
.swiper-container {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.swiper-slide {
	width: 261px;
	height: 162px;
	background-position: center;
	background-size: cover;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

3.js代码

// 引入swiper.min.js
<script type="text/javascript" src="./swiper/dist/js/swiper.min.js"></script>


<script>

var swiper = new Swiper('.swiper-container', {
	loop: true,

    // 一行显示slider的个数
	slidesPerView: 5,

    // 定义slides的数量多少为一组
	slidesPerGroup: 5,

	// 分页
	pagination: {
		el: '.swiper-pagination',

		// 设为true, 点击分页器的指示点分页器会控制Swiper切换
		clickable: true,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	}
});
</script>