swiper 实现网格滚动

需求是实现图片像胶卷一样拖动滚动，下面图片命名，为了节省时间，使用了中文，一般不建议使用中文
实现功能重点不在结构，结构如常

<div class="swiper-container" id="swiper-container" style="margin-top: 1%;">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="/blog/pnews/images/aboutus/编组 14.png" alt="" style="width: 50%;">
		</div>
		<div class="swiper-slide">
			<img src="/blog/pnews/images/aboutus/编组 14备份.png" alt="" style="width: 50%;">
		</div>
		<div class="swiper-slide">
			<img src="/blog/pnews/images/aboutus/编组 14备份 2.png" alt="" style="width: 50%;">
		</div>
		<div class="swiper-slide">
			<img src="/blog/pnews/images/aboutus/编组 14备份 3.png" alt="" style="width: 50%;">
		</div>
		<div class="swiper-slide">
			<img src="/blog/pnews/images/aboutus/编组 14备份 4.png" alt="" style="width: 50%;">
		</div>
		<div class="swiper-slide">
			<img src="/blog/pnews/images/aboutus/编组 14备份 5.png" alt="" style="width: 50%;">
		</div>
	</div>
	<div class="swiper-button-prev" id="ban-pre">
		<img src="/blog/pnews/images/aboutus/Group46.png" alt="" style="position: absolute;left: 468%;top:-100%;">
	</div>
	<div class="swiper-button-next" id="ban-next">
		<img src="/blog/pnews/images/aboutus/Group35.png" alt="" style="position: absolute;right: 468%;top:-100%">
	</div>
</div>

重点在属性方法中

var mySwiper = new Swiper('#swiper-container', {
	autoplay: true,//可选选项，自动滑动
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	slidesPerView : 2, // 容器同时显示的数量
	slidesPerGroup: 2, // 定义slides的数量多少为一组，同时移动俩个
	breakpoints: {
		1920: {
			spaceBetween: -420, // 每个slide之间的距离
			slidesOffsetBefore : -730, // 设定slide与左边框的预设偏移量（单位px）。
		},
		1536: {
			spaceBetween: -350,
			slidesOffsetBefore : -583,
		},
		1200: {
			spaceBetween: -290,
			slidesOffsetBefore : -445,
		},
		1024: {
			spaceBetween: -220,
			slidesOffsetBefore : -390,
		}
	}
})