JavaScript--Swiper双向控制

需求：使用轮播根据每月月份展示当月的海报：
1.需要可以点击月份进行展示对应的海报；
2.需要可以直接点击海报，同时显示对应的月份；
3.需要有控制月份的左右箭头。

解决办法：使用Swiper中的双向控制controller
个人认为，这种方法比slick.js中的滑块同步更方便

代码：

			$(function() {
			/*
				如果想要第一个控制第二个 
				那么需要先将第二个swiper进行初始化，
				否则第一个swiper在设置时会报错说swiper2未定义
			*/
				var Swiper2 = new Swiper('#swiper2', {
					slidesPerView: 3,//设置slider容器能够同时显示的slides数量，可以设置数字
					spaceBetween: 20,//两个slide之间的距离
					centeredSlides: true,//滑块居中模式
					loop: true,//是否循环
					slideToClickedSlide:true,//设置为true则点击slide会过渡到这个slide。
					breakpoints: {
						1024: {//大于等于1024时
							slidesPerView: 5,
							spaceBetween: 20
						},
						1150: {//大于等于1150时
							slidesPerView: 5,
							spaceBetween: 30
						}
					}
				})
				var Swiper1 = new Swiper('#swiper1', {
					slidesPerView: 1,
					spaceBetween: 20,
					loop: true,
					centeredSlides: true,
					slideToClickedSlide:true,
					navigation: {//使用前进后退按钮
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					//设置双向控制的参数，或者true使用默认设置
					//还需要设置control为swiper实例，控制该swiper，而不是被该swiper控制
					controller: {
						control: Swiper2,//这里需要在Swiper2的初始化完成之后
					},
					breakpoints: {
						1024: {//大于等于1024时
							slidesPerView: 3,
							spaceBetween: 30
						}
					}
				})
				Swiper2.controller.control = Swiper1;//Swiper2控制Swiper1，需要初始化Swiper1之后
				Swiper1.controller.control = Swiper2;//Swiper1控制Swiper2，需要初始化Swiper2之后

			})

注：因为html结构不一样，这里不贴html以及css代码了

官网有使用方法，这里只是做一下记录
Swiper官网中Control部分的配置选项