【jQuery】＊swiper.js 画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい

お世話になっております。

jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。

既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。

このサンプルのアニメーションで、
上の画像をフリック（動かす）したら、テキストが同時に動くようにしたいです。

コードは上記サンプルのものと同様です

html
1
2<head>
3	<meta charset="utf-8" />
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
6
7  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
8<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
9
10<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
11<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
12  
13</head>
14  
15	<body>
16		<div class="swiper-container" id="slide">
17		<div class="swiper-wrapper">
18			<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
19			<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
20			<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
21		</div>
22		<div class="slide_info">
23				<div class="swiper-wrapper">
24					<p class="swiper-slide">
25						<a href="#" class="text01">テキスト上</a>
26						<a href="#" class="text02">テキスト下</a> 
27					</p>
28					<p class="swiper-slide">
29						<a href="#" class="text01">テキスト上</a>
30						<a href="#" class="text02">テキスト下</a> 
31					</p>
32					<p class="swiper-slide">
33						<a href="#" class="text01">テキスト上</a>
34						<a href="#" class="text02">テキスト下</a> 
35					</p>
36				</div>
37		<div class="swiper-pagination"></div>
38		</div>
39		</div>
40</body>
41
42

css
1#slide {
2  padding: 0;
3  background: none repeat scroll 0 0 #fff;
4  max-width: 495px;
5  margin: 0 auto;
6  text-align: center;
7}
8#slide img {
9  width: 100%;
10  max-width: 480px;
11}
12
13.slide_info {
14  padding: 10px 0 30px;
15}
16.slide_info a{
17  display: block;
18}

javascript
1	 $(document).ready(function() {
2
3	var swiper = new Swiper('.swiper-container', {
4	      pagination: '.swiper-pagination',
5	      paginationClickable: true,
6	      parallax: true,
7	      speed: 900,
8	      autoplay: 6000,
9	      effect: 'flip',
10	      updateOnImagesReady:true,
11	      loop: true,
12	      autoplay: 2500,
13	      autoplayDisableOnInteraction: false
14	  });
15	  
16	  var swiper = new Swiper('.slide_info', {
17	      parallax: true,
18	      speed: 900,
19	      autoplay: 6000,
20	      loop: true,
21	      autoplay: 2500,
22	      autoplayDisableOnInteraction: false
23	    });
24	  
25	});

時間ができた際に自分で試したサンプルあげようと思います

ご教授頂けますと幸いです。

行動規範の内容に同意します

回答1件

自己解決

http://reiwinn-web.net/2016/11/30/swiper-js-01/

「control」で実装できました

javascript
1     var Swiper_01 = new Swiper('.swiper-container',{
2       pagination: '.swiper-pagination',
3       paginationClickable: true,
4       parallax: true,
5       speed: 900,
6       autoplay: 8000,
7       effect: 'flip',
8       updateOnImagesReady:true,
9       loop: true,
10       autoplay: 2500,
11       autoplayDisableOnInteraction: false,
12     })
13     var Swiper_02 = new Swiper('.slide_info',{
14       speed: 1400,
15       loop: true,
16       parallax: true,
17       updateOnImagesReady:true
18     })
19     Swiper_01.params.control = Swiper_02;
20     Swiper_02.params.control = Swiper_01;