Swiperのバグを解明したい

目的、メインスライドとそれに連動する全スライドを表す小さなサブスライドを表示したい。

改善したい事、サブスライドをクリックしてメイン表示を切り替えると、サブとメインが異なったスライドを表示してしまうので、サブとメイン同じスライドを表示出来るようにしたい。

サイトに反映させる時はスライドに画像を表示させる予定です。

HTML
1
2  <!-- 1個目のSwiper START -->
3	<!-- Swiper START -->
4	<div class="swiper-container swiper1">
5		<!-- メイン表示部分 -->
6		<div class="swiper-wrapper">
7			<!-- 各スライド -->
8			<div class="swiper-slide">Slide 1</div>
9			<div class="swiper-slide">Slide 2</div>
10			<div class="swiper-slide">Slide 3</div>
11			<div class="swiper-slide">Slide 4</div>
12			<div class="swiper-slide">Slide 5</div>
13			<div class="swiper-slide">Slide 6</div>
14			<div class="swiper-slide">Slide 7</div>
15			<div class="swiper-slide">Slide 8</div>
16		</div>
17		<div class="swiper-button-prev prev1"></div>
18		<div class="swiper-button-next next1"></div>
19	</div>
20	<!-- Swiper END -->
21<!-- 1個目のSwiper END -->
22
23<!-- 2個目のSwiper START -->
24	<!-- Swiper START -->
25	<div class="swiper-container swiper2">
26		<!-- メイン表示部分 -->
27		<div class="swiper-wrapper">
28			<!-- 各スライド -->
29			<div class="swiper-slide">Slide 1</div>
30			<div class="swiper-slide">Slide 2</div>
31			<div class="swiper-slide">Slide 3</div>
32			<div class="swiper-slide">Slide 4</div>
33			<div class="swiper-slide">Slide 5</div>
34			<div class="swiper-slide">Slide 6</div>
35			<div class="swiper-slide">Slide 7</div>
36			<div class="swiper-slide">Slide 8</div>
37		</div>
38	</div>
39	<!-- Swiper END -->
40<!-- 2個目のSwiper END -->

css
1  /* 全体のスタイル */
2  .swiper-wrapper {
3    width: 100%;
4    height: 250px;
5  }
6  /* 全スライド共通スタイル */
7  .swiper-slide {
8    color: #ffffff;
9    width: 100%;
10    height: 100%;
11    text-align: center;
12    line-height: 250px;
13  }
14  /* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
15  .swiper-slide:nth-child(4n+1) {
16    background-color: #EECB27;
17  }
18  /* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
19  .swiper-slide:nth-child(4n+2) {
20    background-color: #E13239;
21  }
22  /* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
23  .swiper-slide:nth-child(4n+3) {
24    background-color: #1F1762;
25  }
26  /* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
27  .swiper-slide:nth-child(4n+4) {
28    background-color: #BEDAE5;
29  }
30  /* 2個目のSwiper全体のスタイル */
31.swiper2 {
32	height: 80px;
33	margin-top: 10px;
34}
35/* 2個目のSwiperのスライドのスタイル */
36.swiper2 .swiper-slide {
37	height: 80px;
38	line-height: 80px;
39	-webkit-filter: brightness(0.5);
40	filter: brightness(0.5);
41}
42/* 2個目のSwiperの現在のスライドのスタイル */
43.swiper2 .swiper-slide-active {
44	-webkit-filter: brightness(1);
45	filter: brightness(1);
46}

JavaScript
1var mySwiper1 = new Swiper('.swiper1', {
2	loop: true,
3	centeredSlides: true,
4	initialSlide: 0,
5	spaceBetween: 10,
6	slidesPerView: 3,
7	slideToClickedSlide: true,
8	speed: 2000,
9	autoplay: {
10		delay: 4000,
11		stopOnLastSlide: false,
12		disableOnInteraction: false,
13		reverseDirection: false,
14	},
15	spaceBetween: 10,
16	navigation: {
17		nextEl: '.next1',
18		prevEl: '.prev1'
19	},
20	pagination:{
21		el: '.swiper-pagination',
22	},
23});
24
25var mySwiper2 = new Swiper('.swiper2', {
26	slideToClickedSlide: true,
27	loop: true,
28	centeredSlides: true,
29	initialSlide: 0,
30	controller: {
31		control: mySwiper1,
32		inverse: false,
33		by: 'slide'
34	},
35	spaceBetween: 10,
36	slidesPerView: ８,
37	slideToClickedSlide: true
38});
39mySwiper1.controller.control = mySwiper2;